React Definitive Guide: Routing

Photo by Aaron Andrew Ang on Unsplash

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).

Single Page Applications:

  • 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.

What is Routing?

  • 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”).

What is react-router?

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

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:

Routes.js
  • 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:

App.js

5- Using routes in Header component:

Header.js

What are Route Params:

  • 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:

configure route params

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.
Use route params in a component
  • Here ${product_id} is dynamic id for each product in the list.

3- Receive the route param in the details component:

Receive the param in details component

How to navigate between components:

  • 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.
history.js
  • Finally the App.js file will be like this:
App.js

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.
Use history object for navigation

Thanks for reading and hope you enjoyed the article.

Waiting your comments and feedback 👋

Frontend Engineer