This content originally appeared on DEV Community and was authored by Saleh Mubashar
Lets take a look at how to render a component on a certain route conditionally using React router v6 features.
Perquisites
Install React Router V6 using the following npm command:
npm install react-router-dom@6
Next, import the following components from react router dom.
import {
BrowserRouter as Router,
Route,
Routes,
Navigate,
} from "react-router-dom";
Cresting the Routes
Firstly wrap all the content of your page inside the return function inside the . Next, create the induvial routes inside the component.
return (
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="start" element={<Start />} />
</Routes>
</Router>
)
For each route, we have the path and the element props, these tell the path on the address bar and the component to be rendered out respectively. The exact prop ensures that the *location.pathname * will match exact location path.
Conditional Routing
Lets say we want to render a component only if a state is true for example if a user is logged in, we can do that like this:
<Route
exact
path="start"
element={
loggedIn ? (
<Start />
) : (
<Navigate replace to={"/"} />
)
}
/>
Basically here we are checking if the loggedIn state is true. If it is, we return the Start component, however if it is false, we redirect the user to the homepage using the Navigate element.
The replace prop simply replaces the current location with the given path instead of adding on to it.
Thanks for reading!
This content originally appeared on DEV Community and was authored by Saleh Mubashar
Saleh Mubashar | Sciencx (2022-07-03T04:44:36+00:00) Conditional Routing with React Router V6. Retrieved from https://www.scien.cx/2022/07/03/conditional-routing-with-react-router-v6/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.