Tutorial on React Router 5

Posted in Uncategorized

In this tutorial, we start with create-react-app to create a new React app called “demo-routes” so that we can show you how React Router 5 works.

Running the starter app, it has no routing. We have to add the following dependencies …

npm install react-router-dom

At the time of this writing, this added react-router-dom 5.0.0 to our dependencies in package.json.

We edit the app to look like this with navigation to Home, About and Contact…

by chaning the App.js file to be like this…

And giving it the following CSS …

React Router

Next we import BrowserRouter as Router, Route, and Switch from “react-router-dom”. Because we will be using those three like this …

Note that we can put Router anywhere in the layout. The Switch must be inside a Router. Inside the Switch is a list of Route. Each Route has a path and a component. When the first path is matched, it renders the component and will not look at the remaining Route.

The match is a partial match. If you want an exact match like the Home page, you add the “exact” prop. Hence the order of Route is important. That is why we put the Contact route before the About route.

For the purpose of this example, we will just add our three components at the top of the App.js file like this …

At this point, the App renders the routes correctly if you manually navigate to the following URLs…

http://localhost:3000/

http://localhost:3000/about/

http://localhost:3000/about/contact

But if you go to a non-matching path like
http://localhost:3000/cat

then no component will be rendered. We want it to render the HomeComponent in this case, so we add Redirect at the bottom of our Switch…

Just remember to import Redirect in line 2.

Alternatively, you can use a default Route without a path like this …

NavLink

Now to make our navigation work, import NavLink from react-router-dom and add it to the following …

NavLink also needs to be wrapped inside a router. So we moved Router to encompass both NavLink and Switch. The NavLink takes a “to” path and optional “exact” prop. When the path matches the URL, it applies the “activeClassName” value as a class to the “a” tag that it generates.

Here we use the class name of “active” which we style as bold and red…

It applies this styles whenever the path matches. Note that we had to use the “exact” on the contact path; otherwise, it will styles both the About and Contact nav links as active when the URL is /about/contact.

Link works same as NavLink but without the styling capabilities.

Parameterized Routes

Now we want the /about route to be parameterized so that it accepts a slash topicId after the URL like …

/about/cats

where “cats” would be the topicId. We will also modified the AboutComponent to display this topicId like this …

To make this happen, change the routes to add a new route with “:topicId” in addition to the existing “about” route…

And modify our AboutComponent to pick up this topicId….

If you are not familiar with the destructured parameter syntax, it is equivalent to …

This shows that when component is used with Route, the React Router will pass a “match” prop to the component. This “match” object contains the params, which contains the topicId among other things.

React Router render

What if you need to pass a prop to the HomeComponent, such as “isAuth” value of true or false. Then you have to use the render prop (instead of component) on the Route like this…

And change the HomeComponent to accept that prop…

---