Understand the fundamentals of React Router V6

Introduction

React Router V6 is a standard library for React routing.

Single Page Web App development is its main use.

Routing is directing a user to different pages depending on their behavior or request.

The application’s various routes are defined using React Router. Whenever a user enters a URL into their browser and the URL path matches one of the routes in the router file, they are directed to that route.

It is helpful for displaying several views in a single-page application. Multiple views in React apps are impossible to display without React Router.

Most social media platforms, including Facebook, Instagram, Netflix, and Microsoft, use React Router v6 to display multiple views.

It synchronizes the UI with the URL.

Install react-router

Npm:
npm install [email protected]
Yarn:
yarn add [email protected]

Different react routing packages are available.

React-router provides the applications with the essential routing components and methods.

react-router-native is a mobile routing library.

It is used to develop web apps with react-router-dom.

Add react-router to your react js project

Firstly, Install react-router in your react project.

In your text editor, open src/index.js after you have set up your project and installed React Router.

Thirdly, Near the start of your file, import BrowserRouter from react-router-dom.

import { BrowserRouter } from "react-router-dom" ; 
Fourthly, Wrap your app in a <BrowserRouter>.
<BrowserRouter>
<App />
</BrowserRouter>
Lastly, Now you can use React Route v6 anywhere in your app as shown below:
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>

Create your route components

Types of React router v6

BrowserRouter: uses the browser’s built-in history stack to navigate and store the current position in the address bar using clean URLs. It is used to handle dynamic URLs.

An HTTP hash router is a feature of web browsers that avoids (or can’t) communicating URLs with servers. It’s for dealing with static requests.

The <Switch> component is used to render components only when the path will be matched. Otherwise, it returns to the not found component.

In v6, Switch is not exported from react-router-dom. We could wrap our routes with Switch in a previous version. Instead of using Switch, we now use Routes to accomplish the same goal.

To keep the old URLs, we utilize a Redirect> component to redirect to another route in our application. It can be placed anywhere in the routing hierarchy.

In v6 Redirect is Replaced with Navigate.

Main Components of React-Router

Routes: Version 6 added a new component called routes as well as making improvements to the existing component. It is beneficial to use Routes over Switch instead of traveling in order to make the most efficient use of the time.

Route: When its route matches the current URL, Route, a conditionally displayed component, renders some UI.

Let’s now try to understand the props associated with the Route component.

1. exact: The value and URL must match. It will still work even if we remove the exact term from the syntax. For example, the precise path=’/about’ will only render the component if it exactly matches the route.

Version 6 Does Not Need the Exact Prop

2. path: Our component’s pathname is specified by path.
The path will act as a catch-all for undefined URLs. For a 404 error page, this is ideal.

3. element: Refers to the component which will render on matching the path.

This component provides navigation between routes and links to multiple routes.

Links enable users to navigate between different paths on websites, whereas NavLink provides styles to active routes.

Navigation:
Use Link to let the user change the URL or useNavigate() to do it yourself

<Link to="/">Home</Link> |{" "}
<Link to="about">About</Link>

let navigate = useNavigate();
navigate(`/invoices/${newInvoice.id}`);

Reading URL Parameters

Use :style syntax in your route path and useParams() to read them:

<Route
path="invoices/:invoiceId"
element={<Invoice />}
/>
let params = useParams();
return <h1>Invoice {params.invoiceId}</h1>;

Conclusion

React Router enables the navigation among various components in a React Application. It changes the browser URL and keeps the User Interface in sync with the URL. In addition, very useful for larger and more complex navigational requirements in React applications