React Router is an npm package that gives permission to handle all routes in a react application, using dynamic routing.
Whenever App is in a rendering state dynamic routing takes place, In an older version of the react-router architecture, it is handled in a configuration outside of an application.
React router follows component-based approaches for its routing, it provides multiple different components according to the requirement of the application.
In this Blog, we will Implement Dynamic routing to our simple project React Js application using React router Dom (version 6).
Let’s Get Started :
Create React App
- npx create-react-app rnAppName
Installation
- npm I react-router-dom or yarn add react-router-dom
Basic Routing
- Import react-router-dom in app.js so that we can use it in our project.
- In basic routing, we have to cover our react components with BrowserRouter.
import { BrowserRouter } from “react-router-dom”;
ReactDOM.render(
<BrowserRouter>
{/* your app code goes here */}
</BrowserRouter>, root
);
In Version 6 switch is replaced with Routes and It’s only used once in a file.
import { Routes} from “react-router-dom”;
<Routes>
…
</Routes>
The route is used to create a path and in the path, we have to provide our component path so that router can reach it.
<Route path=”users”>
<Route path=”:id” element={<UserProfile />} />
</Route>
If we provide /* in the path that can help us to relocate to the 404 error page.
<Route path=”/*” element={<Page404/>}/>
In the element, we have to provide the name of the component so that we can route it.
Nested Routing
An Outlet component is used when we want to render a child component in the parent component. when their child component route is rendered it allows nested UI to show. If the parent component route is matched with the path then it will render the child component.
For using dynamic routing in an application, we have to import the OUTLET
import { Outlet } from “react-router-dom”;
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
Navigation
A Navigate component is used when we want to change its current location when it is rendered. It words as a component wrapper around useNavigate and also accepts all the arguments as a prop.
- For use navigation import Navigate from react-router-dom
import { useLocation } from ‘react-router-dom’;
function App() {
let location = useLocation();
React.useEffect(() => { },
[location]);
return (
// …
);
}
Protected
Protected is used to create some login credentials if we want the user can only see anything on the website after login then we import Protected from react-router-dom and in element describe protected and assign a component to be protected.
<Route path=”/” element={<Protected Component={Home} />} />
Link
It is an element that transfers the user to another page from the current page by clicking or tapping on it.
In react-router-dom, a Link component is the same as <a> element with a href that is looking forward to its final path it’s linking to.
This means that the Link component will perform exactly the same and work as you’d expect as a tag on clicking or tapping.
To use Link, we have to import it from react-router-dom
import { Link } from ‘react-router-dom’
Link is provided declarative, accessible navigation around our application
<Link to={user.id}>{user.name}</Link>
