1. First Install react-router-dom
npm i react-router-dom
2. Import the necessary modules
import { Routes, Route, BrowserRouter as Router } from 'react-router-dom';
3. Wrap every component that needs routing in a single Router component
return (
<Router>
<MyComponentA />
<MyComponentB />
<MyComponentC />
</Router>
);
4. Now Wrap them in a single Routes component
return (
<Router>
<Routes>
<MyComponentA />
<MyComponentB />
<MyComponentC />
</Routes>
</Router>
);
5. For each specific route, create a Route component inside the Routes component
return (
<Router>
<Routes>
<Route exact path="/AandB" />
<Route path="/C" />
<MyComponentA />
<MyComponentB />
<MyComponentC />
</Routes>
</Router>
);
6. For each Route component, add an element attribute and move the components into the attribute
Take Note this is written in JSX so for multiple components, you will need a parent element or fragment
return (
<Router>
<Routes>
<Route
exact
path="/AandB"
element={
<>
<MyComponentA />
<MyComponentB />
</>
}
/>
<Route path="/C" element={<MyComponentC />} />
</Routes>
</Router>
);
7. Link Component vs Anchor tag
Links in React and anchor tags have similar functionality, but there are some key differences between them:
Syntax: In React, you create a link using the component from the react-router-dom library, while in HTML, you use the tag.
Routing: The component in React allows you to manage routing within your application, while anchor tags will cause the page to reload and navigate to the specified URL.
Dynamic behavior: With the component, you can dynamically update the destination of the link based on the state of your application, while anchor tags always navigate to the same URL.
Integration with React: The component integrates seamlessly with React, allowing you to use it as part of your component-based architecture, while anchor tags are part of the HTML markup.
In summary, while both links in React and anchor tags allow you to create links to other pages, the component provides additional functionality for managing routing within your React application and integrating with the React framework.
<a href ='/about'> About Page </a>
import {Link} from react-router-dom;
<Link to='/about'> About Page </Link>
8. NavLinks and useParams
NavLinks has a prop called activeClassName that allows you to highlight the link you are currently on.
<NavLink to="/" activeClassName="highlight">
Home
</NavLink>
<NavLink to="/about" activeClassName="highlight">
About
</NavLink>
Getting the Params from a URL requires a hook called useParams provided by react-router-dom.
<Route path="/post/:id/:name" element={<Post/>} />
import { useParams } from "react-router-dom";
function Post() {
const params = useParams();
return (
<div>
<p>Post Id: {params.id}</p>
<p>Written By: {params.name}</p>
</div>
)
}
Assuming the link is localhost:3000/post/376/William
The result would show:
Post Id: 376
Written By: William
9. Navigation and Nested Routes
To navigate(redirect) to different parts of the app depends on the situation.
First, we can use Navigate
import { Navigate } from "react-router-dom";
function Post() {
const status = getStatus();
if(status ====404){
return <Navigate to='/NotFound>'/>
}
return (
<div>
<h1>Posts</h1>
</div>
)
}
Alternatively, you can use useNavigate
import { Navigate, useNavigate } from "react-router-dom";
function Post() {
const navigate = useNavigate();
const handleClick = ()=>{
navigate('/login')
}
return (
<div>
<h1>Posts</h1>
<Button onClick={handleClick}> </Button>
</div>
)
}
useNavigate is a hook that provides access to the navigate method within functional components, whereas navigate is the method directly provided by the react-router-dom library that can be used in any context.
Let's assume we want the Post component to have a nested route /badge, which resolves to /post/badge to reveal a Badge component.
To get nested routes, add the Routes and Route imports from react-router-dom in the chosen component (Post) and add the Routes and Route components as required then add the nested component in the element prop of the Route component (<BadgeComponent/>)
However, for this to work, the route that is responsible for navigating to post in the main component must have a forward slash and an asterisk (/*) after the path. Visually it looks like this:
┌─────────────────────┐
│Main App Component │ The Component that
│<Route path="/post/*"│ Routes to post must
│ element={<Post/>} />│ append "/*" to path
└─────────┬───────────┘ for Badge to render
│ ┌─────────────────────┐
│ │Post Copmponent │
└─────────────► │<Route path="/badge" │
│element={<Badge/>} />│
│ │
└──────────┬──────────┘
│
Badge component │
nested in Post ▼
component ┌────────────────┐
│Badge Component │
localhost:3000/post/badge/ └────────────────┘
The code looks like this:
...
<Route path="/post/*" element={<Post />} />
import { Routes, Route, } from "react-router-dom";
function Post() {
return (
<div>
<h1>Posts</h1>
<Routes>
<Route path='/badge' element={<BadgeComponent/>}>
</Route>
</Routes>
</div>
)
}
If you go to localhost:3000/post/badge you will see the Badge component. The Badge component will not be displayed on /post and will not work if you omit the trailing /* in the Post component's route path in the main App (parent component).
