React Routing: Navigating Pages with react-router-dom.
Tags: webdev, javascript, beginners, react
Published: 2023-04-28 15:52:34

Since you started learning React, you have been building Single 
 Page Applications in which you didn't need to click a link that directs you to another page. In most cases, you will be building websites with multiple pages. I am sure you have done this before with the `anchor` element of HTML so its not new at all. In the multiple web page applications that you built without react, you must have realized that every time you click a link, the page loads before it can render what you are looking for. In this article, I present to you the React way of doing things where you can navigate pages seamlessly without refreshing the page with the help of an installable package called `react-router-dom.

The `react-router-dom` is publicly availabe as a node package and can be installed using node package manager (`npm`) into the node modules directory of your application. In order to download `react router dom, run the following command in your terminal.

```
npm install react-router-dom
```
The package will be downloaded as a production dependency. You can have peek at the `package.json` file of your project under dependencies to see that `react-router-dom` has been installed.

###Importing `react-router-dom` and setting routes.
In order to take advantage of `react-router-dom` we need to import a few components from it. The Components include `BrowserRouter`, `Routes` and `Route` and can be imported using the following line

```
import {BrowserRouter, Routes, Route} from 'react-router-dom'
```
Once these three components have been imported, it is our turn to set up the routes. There are many ways to do this as you will find out by more practice and from other devs. What I am about to show you is just one of them, point is, stay open minded.

In this exapmle we are going to create a component called `RouteSwictch`, this is where all our `Routes` are going to live in for better code organization. Now go ahead and create a file called `RouteSwitch.js`, create the component and wrap `Routes` inside `BrowserRouter` as shown in the code snippet below.

```
const RouterSwitch = () =>{
      return (
            <BrowserRouter>
               <Routes>
                  
               </Routes>
            </BrowserRouter>
);
}
```

Now all our routes are going to wrapped inside the `Routes` wrapper as `Route` components with `path` and `element` as props.
`path` is the path to a specific react `component` that we want to render when the link to that specific `path` is clicked. The `element` prop represent the `component` to display.

Let's go into `App.js` component, add something to display, and add the path to it in the `RouteSwitch` component.

```
export const App = () =>{
      return (
         <h1>This is Home<h1>
);
```
Adding App path to `Routes`
 ```
import Home from './App'
export const RouterSwitch = () =>{
      return (
            <BrowserRouter>
               <Routes>
                  //Adding Route for App
                  <Route path ='/' element ={<App/>}/>
               </Routes>
            </BrowserRouter>
);
}
```

After adding the `Route` your `RouteSwitch` file should look like the above code block. Leaving the `path` value as `"/"` makes the component on that path display by default when the app is launched.

In order to display the `App` component as we desire, we need to go into the index.js file, import `RouteSwitch`, and change the code rendering `App` to render `RouteSwitch` instead.

```
import RouteSwitch from './RouteSwitch'

//Inside root.render
<React.StrictMode>
  <RouteSwitch />
</React.StrictMode>

```

Start the development server using the command `npm start` and view the first page that loads. If you see the text 'This is home' displayed then we are good to go and add another route with a link from `App.js`.

###Adding another Route
This time we are going to create a component called `About` and add a link to it in the `App` component.

```
export const About = () => {
         return (
      <h1>About</h1>
);
}
```
Go to `App` component and add link to `About`. In order to link the two components the React way, we need to import a component called `Link` from `react-router-dom` and provide a path and the component to be displayed.

```
import {Link} from 'react-router-dom'
import About from './About'
export const App = () =>{
      return (
      <>
         <h1>This is Home<h1>
        <Link to ='/about' component = {<About />}>
           About
        </Link>
      </>
);
```

The last thing we need to do for this link to work is to add a `Route` for the `About` component in `Routes` as shown below.

```
import Home from './App'
import About from './About'
export const RouterSwitch = () =>{
      return (
            <BrowserRouter>
               <Routes>
                  //Adding Route for App
                  <Route path ='/' element ={<App />} />
 
                  //Route for About
                 <Router path ='/about' element ={About />} />
               </Routes>
            </BrowserRouter>
);
}
```
Test this and click the link to About to see your About page displayed.

You must be curious about how we can get back to `App`. Well, that simply creating a link from `About` to `App` in `About.js` and this time we do not have to add another `Route` because it's already there. The adjustments added below should do the work.

```
import App from '/App'
import {Link} from 'react-router-dom'
export const About = () => {
         return (
      <h1>About</h1>
      <Link to = '/' component = {<App />} >
       Home
      <Link />
);
}
```


In conclusion, React routing is a wide topic that we can not cover
in one lesson but this should get you started with the basic. Keep in mind that there are other React routing libraries in addition to `react-router-dom`. To find more about `react-router-dom`, see the documentaion [here](https://reactrouter.com/en/main/start/overview). Happy learning.