Sometimes you’ve only got 5 minutes to spare. Instead of wasting it on social media, 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 Scrimba knitting shop website. It’s not real, but maybe one day… ;)
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.).
For example, we can use React Router to connect www.knit-with-scrimba.com/ to www.knit-with-scrimba.com/about or www.knit-with-scrimba.com/shop
To use React Router, you first have to install it using NPM:
npm install react-router-dom
Alternatively, you can just use this playground in Scrimba, which has the completed code already written.
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';
In my example, I link the landing page with two other “pages” (which are actually just components) called Shop
and About
.
First, you’ll need to set up your app to work with React Router. Everything that gets rendered will need to go inside the <BrowserRouter>
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 <Route>
tags. These are the links between the components and should be placed inside the <Switch>
tags.
To tell the <Route>
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.knit-with-scrimba.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 <Route>
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!
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.
Happy coding ;)
Bonus: Learn React Router in 10 Minutes! | React Tutorials
#react-js #react #javascript #web-development