React Router is a standard library for routing in React.
It enables the navigation
among views of various components in a React Application, allows changing
the browser URL, and keeps the UI in sync with the URL. Let us create a simple
application to React to understand how the React Router works. The application
will contain three components the home component, the About component,
and the contact component.
React Router Components
The Main Components of React Router are:
BrowserRouter: BrowserRouter is a router implementation that uses the
HTML5 history API(pushState, replaceState, and the popstate event) to keep
your UI in sync with the URL. It is the parent component that is used to store
all of the other components.
Routes: It’s a new component introduced in the v6 and an upgrade of the
component. The main advantages of Routes over Switch are:
Relative s and s
Routes are chosen based on the best match instead of being
traversed in order.
Route: Route is the conditionally shown component that renders some UI
when its path matches the current URL.
Link: The link component is used to create links to different routes and
implement navigation around the application. It works like an HTML anchor
tag.
Implementing React Router
Example: This example shows navigation using react-router-dom to Home,
// Filename - [Link]
import React, { Component } from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
} from "react-router-dom";
import Home from "./component/home";
import About from "./component/about";
import Contact from "./component/contact";
import "./[Link]";
class App extends Component {
render() {
return (
<Router>
<div className="App">
<ul className="App-header">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">
About Us
</Link>
</li>
<li>
<Link to="/contact">
Contact Us
</Link>
</li>
</ul>
<Routes>
<Route
path="/"
element={<Home />}
></Route>
<Route
path="/about"
element={<About />}
></Route>
<Route
path="/contact"
element={<Contact />}
></Route>
</Routes>
</div>
</Router>
);
}
}
export default App;
React JS Types of Routers :
On the basis of the part of the URL that the router will use to track the content
that the user is trying to view, React Router provides three different kinds of
routers:
Memory Router
Browser Router
Hash Router
Memory Router:
The memory router keeps the URL changes in memory not in the user
browsers. It keeps the history of the URL in memory and it does not read or
write to the address bar so the user can not use the browser’s back button as
well as the forward button. It doesn’t change the URL in your browser. It is very
useful for testing and non-browser environments like React Native.
Pause
Mute
×
Syntax:
import { MemoryRouter as Router } from 'react-router-dom';
Example: This example demonstrates the use of MemoryRouter.
JavaScript
// Filename - [Link]
import React, { Component } from "react";
import {
MemoryRouter as Router,
Route,
Link,
Switch,
} from "react-router-dom";
import Home from "./component/home";
import About from "./component/about";
import Contact from "./component/contact";
import "./[Link]";
class App extends Component {
render() {
return (
<Router>
<div className="App">
<ul className="App-
header">
<li>
<Link
to="/">Home</Link>
</li>
<li>
<Link
to="/about">
About Us
</Link>
</li>
<li>
<Link
to="/contact">
Contact Us
</Link>
</li>
</ul>
<Switch>
<Route
exact
path="/"
component={Hom
e}
></Route>
<Route
exact
path="/about"
component={Abo
ut}
></Route>
<Route
exact
path="/
contact"
component={Con
tact}
></Route>
</Switch>
</div>
</Router>
);
}
export default App;