React Router: What you need to know.

Deactivated User's photo
Deactivated User
·

4 min read

What is React Router?

React router is a dynamic routing library for react that syncs the UI with the URL. In order words, it is a react library that helps in adding and navigating web pages.

Why do we need React Router?

React Router is a popular react library that is pretty important in building modern day apps.

It allows us to navigate through different web pages without having to refresh all over again.

It also makes the user interaction with the app slick and smooth.

React Router is classified into two categories:

  • The React-Router-Native: This is used when working with react native apps.
  • The React-Router-Dom: Is used when working with web apps.

In the course of this article, We will be focusing on React Router-Dom.

There are 5 basic concepts to understand when working with React Router Dom. These are the need to knows when creating a basic react app. They are:

  • BrowserRouter

  • Router

  • Switch

  • Route

  • Link

Before we get into these concepts, let's start by installing the router.

Installing React Router Dom.

Like any other react library or packages, the first step to take is to install said libraries.

npm install react-router-dom

Import React Router Dom.

It is also typical that having installed the React Router, the next step to take is to import it into the App.js.

import { BrowserRouter } from 'react-router-dom'

Back to our 5 major concepts

1. BrowserRouter

BrowserRouter utilizes HTML history API to sync with the URL. BrowserRouter should be imported in the App.js as shown above.

Having imported it, the next thing to do is to wrap everything that is to be rendered by the BrowserRouter element. These includes, all components and the <App/> tag.

<BrowserRouter>
 <App/>
</BrowserRouter>

2. Router

Alternatively, Router can be used in the place of BrowserRouter, therefore to import will look like this:

import { BrowserRouter as Router } from 'react-router-dom';

Similarly, the Router element will wrap all the components to be rendered including the <App/> tag.

<Router>
   <App/>
</Router>

3. Switch

Switch makes it possible for one component to be rendered one at a time. If this element is not added to the code, all the components wrapped by the Router will always render at the same time, which is not what we want.

Switch should therefore be imported into the App.js like:

import { BrowserRouter as Router, Switch } from 'react-router-dom';

Following this, the Switch element will be placed within the Router element also wrapping the components except the <App/>.

This should look like:

<Router>
  <Switch>
     <Home/>
     <About/>
     <Contact/>
  </Switch>
</Router>

4. Route

Route serves as a connection between the components. Each components should thereby be wrapped by a self closing Route element and should contain a path attribute and the name of the component to be loaded.

For the Home component, add exact to the Route tag.

In a similar fashion, the next thing to do is to import Route from react router dom. 

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

Also, import all the different components into the App.js

import Home from './component/Home';
import About from './component/About';
import Contact from './component/Contact';

Next is to nest each components inside the Route element with a path attribute. 

<Router>
  <Switch>
      <Route path="/" component={Home}/>
      <Route path="/About" component={About}/>
      <Route path="/Contact" component={Contact}/>   
  </Switch>
</Route>

5. Link

Link is used to make the different component clickable. In order words it is used to complete the navigation of a site.

So, create a new component e.g. Navbar.js, don't forget to Import this new component into the App.js component.

import Navbar from './components/Navbar';

Hence, import the Link tag from react-router-dom into the new Nav.js component. So this will look like:

import { Link } from 'react-router-dom';

Consequently, in the Navbar component, add a Link to each component with a to=" " prop:

function Navbar() {
  return (
  <div>
    <Link to="/">Home</Link>
    <Link to="About">About</Link>
    <Link to="Contact">Contact</Link>
  </div>
}

So basically, these 5 concepts are the very essential things that is needed when working with react router. With this, we can create a standard Navigation bar that is clickable, sorted out and clean.

React Router also encourages lazy loading in react and makes it easy to create new pages or remove/delete unwanted pages.