React-Router

Understand the fundamentals of React Router

Introduction

React Router V6 is a standard library built for routing in React.

It is mainly used to create Single Page Web Apps.

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

The application’s various routes are defined using React Router. When a user types a certain URL into their browser, and that URL path matches any of the ‘routes’ in the router file, the user is routed 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.

React Router v6 is used by most social media platforms, such as Facebook, Instagram, Netflix, and Microsoft, to show 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.

Secondly, Open src/index.js in your text editor once your project is set up and React Router is installed as a dependency.

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’s used to deal with dynamic URLs.

HashRouter: It’s intended for use in web browsers when the URL shouldn’t (or can’t) be communicated to the server. 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.

Hire React js Developers

Main Components of React-Router

Routes: This is a new component introduced in version 6 as well as an improvement to the component. Routes provide the following advantages over
Switch: Routes are picked based on the best match rather than being visited in sequence.

Route: Route is a conditionally displayed component that renders some UI when its path matches the current URL.

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

1. exact: It was used to match the exact value with the URL. For Eg., the exact path=’/about’ will only render the component if it exactly matches the path but if we remove the exact keyword from the syntax, then UI will still be rendered even if the structure is like /about/10.

The exact Prop Is Not Needed in version 6

2. path: Our component’s pathname is specified by path.
Setting the path to * will serve as a catch-all for all URLs that aren’t defined. For a 404 error page, this is ideal.

<Route path=”*” element={<NotFound />} />

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

Link: The link component is used to create links to multiple routes and to provide application navigation.

The Link component allows navigating the different routes on the websites, whereas the NavLink component is used to add styles to the 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>

OR

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.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply