Learn React Router in 5 Minutes – Beginner’s Guide
Sometimes you’ve only got 5 minutes to spare. Instead of wasting it, let’s get a 5-minute introduction to React-Router! In this tutorial, we’re going to learn the basics of routing in React by building navigation for a myshop Ecommerce website.
Many modern websites are actually made up of a single page. They just look like multiple pages because they contain components which render like separate pages. These are usually referred to as SPAs — single-page applications.At its core, what React Router does is conditionally render certain components to display depending on the route being used in the URL (/ for the home page, /about for the about page, etc.).
Purpose of React Router:
React Router, and dynamic client-side routing, allow us to build a single-page web application and navigation without the page refreshing as the user navigates. React Router uses a component structure to call components based on the route, which displays the appropriate information.
Installing React Router:
npm install react-router-dom
You’ll need to import BrowserRouter, Route, and Switch from react-router-dom package:
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom' ;
First, you’ll need to set up your app to work with React Router. Everything that gets rendered will need to go inside the element, so wrap your App in those first. It’s the component that does all the logic of displaying various components that you provide it with.
// index.js
ReactDOM. render(
<BrowserRouter>
<App />
</BrowserRouter>,
document. getElementById ('root')
)
Next, in your App component, add the Switch element (open and closing tags). These ensure that only one component is rendered at a time. If we don’t use this, we can default to the Error component, which we’re going to write later.
function App() {
return (
<main>
<Switch>
</Switch>
</main>
)
}
It’s now time to add your tags. These are the links between the components and should be placed inside the tags.
To tell the tags which component to load, simply add a path attribute and the name of the component you want to load with component attribute.
<Route path= "/" component={Home} />
Many homepage URLs are the site name followed by “/”, for example, www.myshop.com/. In this case, we add exact to the Route tag. This is because the other URLs also contain “/”, so if we don’t tell the app that it needs to look for just /, it loads the first one to match the route, and we get a pretty tricky bug to deal with
function App() {
return (
<main>
<Switch>
<Route path= "/" component={Home} exact />
<Route path= "/about" component={About} />
<Route path= "/shop" component={Shop} />
</Switch>
</main>
)
}
Now import the components into the app. You may wish to have them in a separate “components” folder to keep code clean and readable
import Home from './components/Home';
import About from './components/About';
import Shop from './components/Shop';
Onto that error message I mentioned earlier, which loads if a user types an incorrect URL. This is just like a normal tag, but with no path. The Error component contains <h1>Oops! Page not found!<h1>. Don’t forget to import it into the app
function App() {
return (
<main>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/about" component={About} />
<Route path="/shop" component={Shop} />
<Route component={Error} />
</Switch>
</main>
)
}
So far, our site is only navigable by typing the URLs. To add clickable links to the site, we use the Link element from React Router and set up a new Navbar component. Once again, don’t forget to import the new component into the app.
Now add a Link for each component in the app and use to=”URL” to link them
function Navbar() {
return (
<div>
<Link to="/">Home </Link>
<Link to="/about">About Us </Link>
<Link to="/shop">Shop Now </Link>
</div>
);
};
Your site now has clickable links that can navigate you around your single-page app!
Conclusion
So there we have it. If you want to easily navigate around a React app, forget the anchor tags and add React Router. It’s clean, it’s organized, and it makes adding and deleting pages a whole lot easier.Mildaintrainings brings you a virtual, hands-on React JS training course. Enroll & Get Certified now!
