How to Set Up Client-Side Routing Using React
Tags: react, beginners, tutorial
Published: 2021-10-05 00:04:00

#Introduction
Giving users the ability to navigate throughout your application in a logical and organized manner is crucial. React provides developers with the `<Route></Route>` tool to allow ease of access to the components of your choosing. In this post, I will walk you through the steps to take in order to set up client-side routing using React in the form of clickable links, assuming you have started a React application using `create-react-app`.

##Step 1: 
Before you are able to use `<Route>` you must first import from react as such:

`import {BrowserRouter} from "react-router-dom";`

This should be done in your index.js file. 

If you wish to rename the `BrowserRouter` to something else, you can do so by importing in the following manner:

`import {BrowserRouter as MyRouter} from "react-router-dom";`

For the sake of this guide, I will be using `<BrowserRouter>`.

##Step 2:
In your terminal, run the command `$ npm install react-router-dom` 

##Step 3:
In your index.js file, wrap the application being rendered with `<BrowserRouter>`

eg:
```
...
ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>
 document.getElementById('root')
);
...
```
##Step 4:
Decide where you want to draw the routes. Usually, it makes sense to direct the routes to where the components are being rendered. I'll say that parent component is called `<App />`.

##Step 5:
Import `<Route>` and `<Switch>` into the `<App />` component using

`import {Route, Switch} from "react-router-dom";`

##Step 6:
Create an empty navigation component, such as Nav.js

eg:
```
import React from "react";

  function Nav(){
     return(<div></div>);
  }

export default Nav;
```
##Step 7:
Render the navigation component within the `<App />` component.

##Step 8:
Wrap all the components within `<App />` you wish to create routes to with `<Switch></Switch>`, and wrap each individual component within the `<Switch>` with `<Route></Route>`

eg:
```
...
function App(){
   return(){
     <Nav />
       <Switch>
         <Route>
           <ComponentOne />
         </Route>
         <Route>
           <ComponentTwo />
         </Route>
       </Switch>
   };
}
...
```
**Note:** the `<Nav />` component was left outside of the `<Switch>`, this is because we want the navigation functionality to remain on all pages of our application.

##Step 9:
Set the paths you want for each component within the `<Switch>` using `path` or `exact path`

eg:
```
...
       <Route exact path="/One">
        <ComponentOne />
       </Route>
       <Route exact path="/Two">
        <ComponentTwo />
       </Route>
...
```
##Step 10:
Import `<NavLink>` into your `<Nav />` component. Then, add `<NavLink>` to create clickable links with paths defined by the `<Route>`s in step 9. 

eg:
```
...
import {NavLink} from "react-router-dom";

function Nav(){
   return(
     <div>
       <h2>Navigation Bar</h2>
        <NavLink to="/One">ComponentOne</NavLink>
        <NavLink to="/Two">ComponentTwo</NavLink>
     </div>
   )
}
...
```


#Conclusion:
You should now have fully functioning client-side routing in the form of clickable links under a navigation bar! Being able to implement routes is a crucial skill to have considering how necessary it is for users to be able to navigate around applications with ease. I hope this guide is helpful to you if you are learning how to build client-side routing in React.