What we are building

Nothing fancy just a simple react router example, if you’d like to see the final version of the code feel free to clone the repo from github

Install Dependencies

You will need Node installed on your machine but since you are reading an article about React I will assume you got that covered.

First we will use react create app to get our project setup

npx create-react-app simple-router

This will create our new project in a folder called simple-router. Lets cd in to simple-router and install the web version of react router

npm install react-router-dom --save

OK now, since we got all we need, what we will do is to clear up all the files from the src and public folder provided by create-react-app so we can start from scratch.

Getting Our Static HTML

First in public we will create a brand new index.html and add the following:

And that’s it, this is all the HTML we will need for this project. It’s all about the JavaScript from now on.

Build the Components

Back to our src folder we will add an index.js file:

If you look closely you will see that we are importing some css but for now let’s keep focused on the components we will deal with the styling in a moment.

OK we obviously need a Nav component so let’s add it to our src

We are importing some more components that we don’t have build yet, easy to fix:

Nothing exciting just couple of very simple components.

Styling Things Up

Remember how I said that it will be all about the JavaScript. Well almost, we will just add some styles really quickly, at the end of the day no one really want’s their app to be ugly. In our trusty src folder add a new index.css file:

Now if you run npm start from your terminal and go to http://localhost:3000/ you should see something like this:

Go Back To The Routes

Things are looking great but we still haven't done any routing yet. If you click on those shiny links nothing will happen.

React router to the rescue.

First back to Nav.jsx we will import the following:

import {Route,NavLink,BrowserRouter} from "react-router-dom";

Since React Router V4 all we are dealing with is a React components. There are three types of components: Routers, Route Matching and Route Rendering Props.

BrowserRouter is a Router component that will create a specialised history object for us. Basically this is what will allow our users to go back and forward trough our app or website using the browser buttons and always arrive at the spot that they left previously. This component should be at the root of our app that’s why we will wrap our Nav component with it:

<BrowserRouter>
<div>       
<h1>React Router Simple Starter</h1>            
    <ul className="header">
       <li><a className="active" href="/">Home</a></li>
       <li><a href="/blog">Stuff</a></li>
       <li><a href="/contact">Contact</a></li>
    </ul>
<div className="content"></div>    
</div>  
</BrowserRouter>

For the record there are two Router components available in React Router BrowserRouter and HashRouter. According the official documentation:

you should use a <BrowserRouter> if you have a server that responds to requests and a <HashRouter> if you are using a static file server

Or more simply, BrowserRouter is what you will use most often on the client side and HashRouter is usually used for server side rendering.

This is all great but if we start our app and click on the links, still nothing will happen.

Don't panic, this is normal, to get this to work we will need to get hold of our NavLink component:

<BrowserRouter>
<div>       
<h1>React Router Simple Starter</h1>            
    <ul className="header">
       <li><NavLink to="/">Home</NavLink></li>
       <li><NavLink to="/blog">Stuff</a></li>
       <li><NavLink to="/contact">Contact</a></li>
    </ul>
<div className="content"></div>    
</div>  
</BrowserRouter>

The NavLink component is a styled version of the Link component that will add styling attributes to the rendered element when it matches the current URL. The default class name is active this is why we don't need the className prop anymore, we do need to change the href prop to to no pun intended.

But what the Link component does you might ask yourself, again the React Router documentation holds the answer:

Provides declarative, accessible navigation around your application.

Cool so let’s go click on those shiny navigation links …

Not so fast, we are still not done. To get everything working we need to bring a Route Matching component to our navigation. First let’s take a quick look at what the documentation have to say about those type of components:

Route matching is done by comparing a <Route>'s path prop to the current location’s pathname. When a <Route> matches it will render its content and when it does not match, it will render null. A <Route> with no path will always match.

OK just to make it a little bit more simple. When you click on a NavLink component this will update the browser url to match the path equal to the to porp passed to that component. For example if we click on

<li><NavLink to="/blog">Stuff</a></li>

The url in our browser will change to myapp.com/blog . Then React Router will look for a matching path passed to the Route component and will show whatever component we have set on this path.

This sound really confusing even to me, so let’s write some actual code. Hopefully this will add some clarity:

<BrowserRouter>
<div>
<h1>React Router Simple Starter</h1>
  <ul className="header">
    <li><NavLink exact to="/">Home</NavLink> </li>
    <li><NavLink to="/Blog">Blog</NavLink></li>
    <li><NavLink to="/Contact">Contact</NavLink></li>
  </ul>
<div className="content">
  <Route path="/" component={Home} />
  <Route path="/blog" component={Blog} />
  <Route path="/contact" component={Contact} />
</div>
</div>
</BrowserRouter>

So what’s happening here is we are saying to React Router when the browser url matches the path prop show the component passed to the component prop on the page.

The component prop is part of the Route Rendering Props we mentioned earlier. There are three prop choices for how you render a component for a given Route: component, render, and children . We will not need to consider the render and the children props for this starter project.

Side Note: There is one more Route Matching component provided by React Router, the Switch component, but we will look at this in some of the future advanced routing articles I have planned.

It’s Time To Click On Some Links

And finally, we can start our server, go to our app and start clicking on the links.

But, wait a minute… Something doesn’t seems right. All looks great on the home page, but when we go to the Blog or Contact pages we are still seeing the content from the Home page displayed.

The reason for this is because the path for loading our Home component is /. Our Blog and Contact components have the / character as part of their paths as well. This means our Home component always matches whatever path we are trying to navigate to. The fix for that is simple. In the Route component representing our home content, we will add the exact prop. So the final version of our Nav.jsx file should look like this:

And that’s it you now have the knowledge to build routes in your React app’s using React Router.

Thank you for reading! I hope this article was helpful and you’ve learned something new. As usual if you have any questions or recommendations feel free to share them in the comments.