React Definitive Guide: Routing

Sahar E.Hassan
Oct 16, 2019 · 4 min read
Photo by Aaron Andrew Ang on Unsplash

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

To use routing feature in React you must create several components, if you don’t know what is React components and their types, reading this article will guide you: https://medium.com/@sahar.e.hassan/react-definitive-guide-components-4b8869912dd8


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 👋

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade