React Routing: Navigating Pages with react-router-dom.

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. Happy learning.