React Router - A Brief Into

Last week I had a technical phone interview (cue the horror music). I was really nervous. I decided to talk about a project built in React and was asked about a roadblock that I hit. Spoiler, I hit more than one. But one that immediately sprung to mind was dealing with my routes. I had run into an issue with the path attribute messing up my other routes, and in this case documentation really saved me. But then, when I trying to explain react router to someone who wasn’t really familiar with the terms I was using, I found myself stumbling a bit and not really knowing how to explain. So now I’m going to write about it to solidify my knowledge and you’re all coming along for the ride.

First thing, is you need to install React Router (this assumes you already have a React app created):

npm install react-router-dom

Great, now that we’ve installed it - this being React we need to import BrowserRouter, Route and Switch to use it. We'll also be using Link, so include that too.

In your App.js file add the following code snippet:

import React from ‘react’;
import {BrowserRouter, Route, Switch, Link} from ‘react-router-dom’;

And let’s assume for the sake of saving time I have three other components- Home.js, About.js and Stuff.js. I’m going to want routes for each of these. Anything we wanted to be rendered needs to get wrapped in BrowserRouter. So in our index.js file we need to do the following:

ReactDom.render (
    <BroswerRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

Then let’s go ahead and add , which does exactly what it’s name says, allows us to switch between routes. A looks through its children s and renders the first one that matches the current URL.

Then we’ll incorporate the tags. To let the routes know which component to render we need to add the path attribute, and the component attribute (illustrated in the code below). Once all of that is done our code should look something like this:

const App = () => {
  return (
   <div>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/about" component={About} />
       <Route path="/shop" component={Shop} />         
     </Switch>
   </div>
 )
}

Most of the time your homepage’s route will simply be '/', right? Ok, this is where I got into trouble a bit the first go round. All of our other routes will contain '/', like '/about' and '/stuff' so how does our router know what to do here and how do we save ourselves (well you, not me) a lot of frustrating debugging? We’ll use exact path for our homepage. So instead of this:

<Route path="/" component={Home} />

We’ll use:

<Route exact path='/' component={Home}>

Don’t forget to import all of your components:

import Home from ‘./components/Home’;
import About from ‘./components/About';
import Stuff from ‘./components/Stuff’;

All of this let’s us navigate to the different routes we’ve set up just by typing the URLS into the browser. Most likely, you’ll want to provide clickable links in your app. Now we’ll make use of the tag in react router and your links can reside in a Navbar component.

const Navbar = () => {
    return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/stuff">Stuff</Link>
    </div>
  );
};

And now you should have a fairly easy to navigate set of routes. As I mentioned, this process tripped me up the first time, so no promises I didn’t slip up here too. If anything stands out as incorrect here, please feel free to point it out! Thanks for reading.