React Router

4 min readJun 9, 2021

Most modern websites are made of one page, they are like multi-page websites because they have components that are rendered as separate pages. These websites are commonly known as SPA — Single Page Application. What is done at the core of this component is to render the desired component according to the desired route. For example: (home component for root / and about us component for root / about).

Now we want to see how we can implement this structure in our mini App.

* Structure of this mini-project *

1.Component folder: main components

-post.js : post description

2.Containers folder: components that are being used as pages of our project (root level components)

-Fullpost.js: list of posts
-Newpost.js: a form as a new post
-Blog.js: our main page

We will go step by step to implement react-router:

1.Install React router

use this command to install react-router: npm install react-router-dom

2. Importing modules in our main file which is App.js

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

I- Browser Router/Router :

the Route component will help us to define a path and then we can define what we want to happen in that path.

We use this component to route project components. Based on the address or route that is entered in the browser, the desired component is displayed as a child of <BrowserRouter />.

Now we need to add routes into our blog page (blog.js):

<Route path=”/” render={()=><h2>Home</h2>}/>

we can use either render() or a component after defining a path.

Using exact :

Since the react-router tries to render both components, we need to specify that we only want to have an exact match rooted on the component.that is why we put exact before component.

<Route path=”/” exact render={()=><h2>Home</h2>}/>

<Route path=”/” render={()=><h2>Home2</h2>}/>

We should show different components for different paths:

<Route path=”/” exact component={Posts} />

II:Link

We need to put a link (tag <a> </a>) on the page so that users can navigate to the routes we have defined. But with this tag, browsers treat that root as a server-side root. That is, when we click on it, the page is refreshed and transferred to the new link. So to prevent this we have to use another component called <Link/> instead of <a/> tag.

The <Link/> component needs a property called to, which specifies a location. Please note that “ to “ can point either to a string or an object or a function.

<Link to={{pathname: ‘/NewPost’,search: ‘?sort=post’ }}>NewPost</Link>

We must prevent the pages from refreshing, so we have to use the link :

import {Link} from “react-router-dom”;

We can also config Link :

<Link to={{pathname: ‘/NewPost’, search: ‘?sort=post’ }}>NewPost</Link>

III- Switch

Switch component helps to render routes one by one and not together.<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively.

import {Route,Link ,Switch} from ‘react-router-dom’

IV: Redirecting routes

We want to redirect the test route to the main route:

For this purpose we can use the Redirect component :

import {Route,Link ,Switch , Redirect} from ‘react-router-dom’

Now we add redirect :(please note that we must remove exact from the main route)

Conditional redirects

Suppose we need to redirect the user after submitting a form to the homepage:

In Newpost.js

Since our state is being changed we can define a new state :

Adding redirect into render() by adding a condition:

V-Adding 404 not found page

The 404 Not Found, the message is a Hypertext Transfer Protocol standard response code, in computer network communications, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested

We can add the 404 in our routes: