Client Side Routing in React

When approaching routing in React it can be a bit daunting at first for the causal beginner, I hope that this post makes it easier to understand by breaking it up into easily digestible chunks.

Installing and Setup

We are going to be using react-router-dom to handle our routing, if you want to look at the documentation, you can refer to it here

First we need to install react-router-dom so run the following command in your terminal:

npm install react-router-dom
//or
yarn add react-router-dom

BrowserRouter, Switch, and Route

After you have it installed, we're going to go our highest parent component, typically that will be App.js and we are going to import BrowserRouter, Switch, and Route.

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

Then we are going to put in the basic structure for our routes. We will have BrowserRouter renamed as Router as the most outer wrapper:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>

</Router>
)
}

Inside Router we will place our Routes as such:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>
  <Route path="/">
    <Home/>
  </Route>
  <Route path="/about">
    <About/>
  </Route>
</Router>
)
}

And then finally inside Router we will wrap all of our Routes with the <Switch> component like this:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>
  <Switch>
    <Route path="/">
      <Home/>
    </Route>
    <Route path="/about">
      <About/>
    </Route>
  </Switch>
</Router>
)
}

The Switch component makes it so that if your are on the "/" root address you won't see what is in the "/about" address. You can think of it like a switch statement or like tabs where you can only see one at a time. But your url matches more than one it will display the url it matches first going from top to bottom. To prevent that we can add exact key word to only allow the exact url to display our content:

  <Route exact path="/about">
      <About/>
  </Route>

Link and NavLink

Okay, we have our routes, now let's make a NavBar Component so that our user can access them.

import { NavLink } from 'react-router-dom'

const NavBar = () => {
  return (
    <div>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </div>
  )
}

The only difference between <Link> and <NavLink> is that when ever a Navlink route is selected the Navlink will have the link active attribute applied to it. Each Nav/Link component has to have the to attribute to direct the user to the correct route. Notice that the value of the to corresponds to our Routes in our App component.

Beyond The Basics

That will allow you to set up some basic client side routing, but there is actually a lot more that you can do with react-router-dom. There are some really useful hooks like useHistory, whicht you can use to redirect your user after an event, or `useParams to allow them follow a link for more details about something on your page. Definitely check out the documentation from React Router for more info.

I hope this gave you a good start to managing routes client side.