React Definitive Guide: Routing

4 min readOct 16, 2019

In this article I’ll discuss React Router (V 5.1.1) which is stable now.

What we’re going to discuss in this article:

1- Single Page Applications.

2- What is Routing.

3- What is react-router.

4- What are Route Params.

5- How to navigate between components.

React is useful for creating Single Page Applications (SPAs).

Are web apps that don’t need a full page reload on change of view, Instead they swap views into or out from a section of the page as the user navigates through the app.
Are web applications that load a single HTML page and dynamically update the page based on the user interaction with the web application.

Every view on the screen should have its own specific URL so i can bookmark the page.
Routing enables you to create different URLs for different content in your application (in another word “for different Components”).
The forward and back buttons should move you forward and backward in your browsing history.

example.com/products

A route is specified in the URL after the base URL of the site. (in our example: “/products”).

react-router is a routing library that helps you create the routing in your react app.

First you should create react app. (you can follow the steps in this article to create react application: https://medium.com/@sahar.e.hassan/react-definitive-guide-building-your-first-react-app-2df4106a6ac6

1- Install react-router library:

npm install react-router --save

2- Install react-router-dom:

It contains the DOM bindings for React Router. In other words, the router components for websites.

npm install react-router-dom --save

3- Create routes file to configure routes and import router classes:

We wrap all our routes inside Switch component to avoid rendering the Home component with all routes as any route will match Home path=“/”. So Switch will render only one component at the time.

4- Import Routes in src/App.js:

5- Using routes in Header component:

Route parameters are parts of the URL that will change based on the object we want to display.
For example, if we wanted to view information on product #1 would visit the path /product/1 , That last part of the URL is the parameter.
With react-router-dom, we specify a dynamic portion of the URL to be matched by putting a colon (:) before it.

1- Configure route params in the route:

2- Use the route param in a component:

for example, If you’re rendering a list of products and when you click on each product name will redirect to a details page for this product.

3- Receive the route param in the details component:

If you want to redirect the user at any certain point to another component, but without depending on users’ action, you should use history object.

1- Create history object:

We create an instance from BrowserHistory() in a file called history,
Then import the history file in App.js to pass history object to the Router that considered as a parent for all project routes.

2- Use history object for navigation:

In any component we import history object and use it by typing the following line of code and we pass the component path as a parameter to the push function inside the history object.