How to set up a Basic React Router V5

What is React Router

React Router is a Library that makes it possible to navigate from one react component to another. In other words, it enables you to switch between views. It is based on a model called Dynamic Routing.

Dynamic Routing VS Static Routing

Static routing	Dynamic routing
Define at the initialization of the application before the application is rendered Ex. In Express.js app.get(“/”, home); app.get(“/about”, about);	Routing occurs in three basic steps as the application is rendering 1. Call Router component 2. Set Link component to a specific location 3. Render the router

React App with React Router

1. Create a React App with create-react-app

npx create-react-app demo-router

2. install react-router-dom

npm install [email protected] or yarn install react-router-dom@5.3.0

3. Create three pages

After you have created the react app with create-react-app, in the src folder/directory, you are going to create 3 pages: Home.js, About.js, Contact.js

Creating Home page ( Home.js)

import React from 'react'

export default function Home() {
    return <h2>Home</h2>;
}

Creating About us page( About.js)

import React from 'react'

export default function About() {
    return <h2>About</h2>;
}

Creating Contact page( Contact.js)

import React from 'react'

export default function Contact() {
    return <h2>Contact Us</h2>;
}

Editing App.js

In App.js, we implement the React Router. There will be four major components in code in App.js. First, we will take a look at them briefly.

<Router> component

The router component is the wrapper that includes all other React-Router components. There are five types of Router components.

• BrowserRouter
• HashRouter
• MemoryRouter
• NativeRouter
• StaticRouter

In this post, we use the BrowserRouter, which uses the HTML5 history API.

<Route> component

Route component renders the UI elements if the location specified in the path prop matches with the URL path. you can also provide URL parameters in the path prop

<Route>
<User path='/user/:id'>
</Route >

This path will match the URL path ‘/user/123’ and render information related to the user with ID 123

<Link> component

The Link component provides a way to navigate the app. It has a “to” prop that passes pathname, search criteria, or a hash.

<Switch> Component

The Switch component will render the first Route component that matches with or includes in the URL path

Take a look at the following snippet

 <Switch>
    <Route path="/">
      <Home />
    </Route>

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

   <Route path="/contact">
      <Contact />
    </Route>          
 </Switch>

If the URL path is ‘/contact’ or ‘/about’, this code will always show you the Home page ( <Home /> component).

Why is this?

This is because ‘/contact’ or ‘/about’ include ‘/’, which matches the home page, and the Switch component renders only the first Route that matches or includes in the URL path.

you can correct the above code by placing the Route of the home component at the end of the list of Routes.

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

   <Route path="/contact">
      <Contact />
    </Route>   

   <Route path="/">
      <Home />
    </Route>       
 </Switch>

However, a better approach is to use the exact keyword in the Route component. This ensures matching the exact path no matter where you place your home Route within the Switch component.

<Switch>
    <Route exact path="/">
      <Home />
    </Route>

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

   <Route path="/contact">
      <Contact />
    </Route>          
 </Switch>

Therefore, the App.js code should be as follows. You can delete the code automatically generated with create-react-app and paste the code below to App.js.

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Home from './Home'
import About from './About'
import Contact from './Contact'

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route exact path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Conclusion

React Router V5 is a React library based on the concept of dynamic routing. In this post, I have shown you the basic components needed to implement React Router. Router, Route, Link, and Switch. I will bring you more advanced features of React-Router in future posts.