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.

Installation:

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React JS: Conditional Rendering and how to implement Geolocation

Jest v18 to v23 Migration Notes

Vue.js and D3: A Chart Waiting To Happen

Introducing Nuxt.js at Digital Natives

[Salesforce LWC] — Why Salesforce LWC? [Advantages of Lightning Web Component]

Google one-tap sign up.

Javascript’s magical words: this, new, call, apply, and bind

Mocha- A Rich JavaScript Framework.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sahar E.Hassan

Sahar E.Hassan

Frontend Engineer

More from Medium

React.js UI Frameworks in 2022

What Exactly is React Js?

Using React Hooks to Make API Calls

Class based counter example

How to implement the simplest search bar in React.js