Previously I went through thebasics of react. By the end of that tutorial we had a simple todo app. Today I am going to explore the basics of react router.

Just as we have done in the previous tutorial, you can start this project by runningcreate-react-app some-name orcodesandbox.

I will assume you are using codesandbox mainly because it's simple for all of us to quickly get started. If you know how to work with the terminal then you don't need instructions on that, you can follow along just as easy.

Again, when navigating tocodesandbox click "react" and you'll get a starter project.

Installing the router

Routes come in a separate package, so we need to installreact-router-dom.

If you want to follow along at codesandbox then click on "Dependencies" on the right hand side, the packages that are already installed are revealed, then simply select "Add Packages" then just search for "react-router-dom".

Remember for the terminal users, run:

yarn add react-router-dom

Let's get started

Inindex.js, replace the existing code with the following.

import React from 'react';import { render } from 'react-dom';import { BrowserRouter, Route, Link } from 'react-router-dom';const App = () => (  <BrowserRouter>    <div>      Hello world     </div>  </BrowserRouter>);render(<App />, document.getElementById('root'));

Note how we takeBrowserRouter,Route, andLink from thereact-router-dom package.

Based on thedocumentation theBrowserRouter is

A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

As you can see in our code, you can think ofBrowserRouter as the parent wrapper of the app. However, note that we still need to use an html wrapper to wrap the code.

Creating the first route

Let's create the first route using theRoute module.

  <BrowserRouter>    <div>      <Route path='/' render={props => {        return (          <h1>Hello World</h1>        )      }} />    </div>  </BrowserRouter>

Now you'll see "Hello World" printed on the home page.

It's very easy to make sence of the code, we have made sure that when the client navigates to the home page - in other words to the specified path (path='/') then we render some code.

The code that we are rendering looks like a component, and it is a component. As such, "There are 3 ways to render something with a<Route>" (ref)

• <Route component>
• <Route render>
• <Route children>

Let's use the component method. Of course, the component method takes a component, so let's create a basic component first. Create a new file calledHelloworld.js and add the following:

import React from 'react';const HelloWorld = () => (  <h1>Hello world from a separate component</h1>);export default HelloWorld;

Now back inindex.js let's import the component then use it

  import Helloworld from './HelloWorld'  <BrowserRouter>    <div>      <Route path='/' component={Helloworld} />    </div>  </BrowserRouter>

Using multiple routes

Clearly the usefulness of routes is to have more than one. To keep the code simple lets just paste the aboveRoute a few times

  import Helloworld from './HelloWorld'  <BrowserRouter>    <div>      <Route path='/' component={Helloworld} />      <Route path='/hello' component={Helloworld} />      <Route path='/hello/world' component={Helloworld} />    </div>  </BrowserRouter>

With that, theHelloworld component will be rendered on all three paths.

However there is an unexpected side effect, if we navigate to/hello/world we see all three components rendered on the page.

There are times when that is the effect we want, however not this time! There are two ways we can fix this issue. We could useSwitch, whichreact-router-dom gives us. Or we could useexact as an attribute to eachRoute.

Referring to thedocumentation:

<Switch> is unique in that it renders a route exclusively. In contrast, every<Route> that matches the location renders inclusively

So we use aSwitch to wrap our routes:

  <BrowserRouter>    <Switch>      <Route path='/' component={Helloworld} />      <Route path='/hello' component={Helloworld} />      <Route path='/hello/world' component={Helloworld} />    </Switch>  </BrowserRouter>

Now each route will be rendered exclusively.

The other way is to just useexact as the attribute in theRoute.

  <BrowserRouter>    <div>      <Route exact path='/' component={Helloworld} />      <Route exact path='/hello' component={Helloworld} />      <Route exact path='/hello/world' component={Helloworld} />    </div>  </BrowserRouter>

Finally, we are able to useLink to link through these routes. UseLink instead of the usual anchor tag.

  <BrowserRouter>    <div>      <Link to="/">Home</Link>      <Link to="/hello">Hello</Link>      <Link to="/hello/world">world</Link>    </div>  </BrowserRouter>

Note thatLink has to be used within the wrapping div.

That's it for the basics of routing in react.