Client Side Routing in React
Tags: beginners, react, javascript
Published: 2021-07-23 19:25:09

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](https://reactrouter.com/web/example/basic)

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.