DEV Community

Conditional Routing with React Router V6

Saleh Mubashar on July 03, 2022

Lets take a look at how to render a component on a certain route conditionally using React router v6 features. Check out my latest blog post on F...

Read full post

Shuy • Aug 16 '22

I am a little late, but I was wondering, if you have multiple route that use the same condition as you (with the loggedIn boolean value), is there a way to move the condition out of the all those round and somehow wrap those routes with the condition to avoid repitition?

Saleh Mubashar • Feb 3 '23

perhaps you could create a routes array and the map it out?

Arsadi • Mar 22 '23

I have an issue.

I do conditional render element like you did. But, I use permission instead of loggedIn. So I check if the user have permission to this route. the permission I get from backend API, and I store it on localStorage.

When the unAuthorized user has logged in, and logged out, next when the Authorized user logged in (user has permission) the route still protected. I still got redirected even the checker function return true (which is should return me the Element, not Redirect).

It will works fine when I refresh the page as Authorized user on the /dashboard routes (this is first page when user successfully logged in). Maybe the React Router not re-rendered automatically?.

I've force refresh the page if the user logged out. But it doesn't solve the problem.

Do you have some advice on this?

Thank you.

Saleh Mubashar • Mar 22 '23

Yes I think there is a rendering issue.
You can try to create a custom Protected Route
Check out this link for more info .
This is what is suggest. Hope it works

Bhavyashah • Jul 3 '22

@salehmubashar Can you Please add some examples or some demo so we can understand very well.

Saleh Mubashar • Jul 3 '22 • Edited

hmm, something like this may clear your mind.
For example we have a state that we can toggle with a button. We can add a function on the button to toggle the state which in turn shows/hides the component/route

import * as React from "react";
import {  useState } from "react";
import { BrowserRouter as Router, Routes,Route,Navigate } from "react-router-dom";
import Start from "./Start";

function App() {
  const [loggedIn, setLoggedIn ] = useState(true)
  const toggleRoute = () =>{
    setLoggedIn(!loggedIn)
  }
  return (
    <>
    <Router>
      <Routes>
        <Route
          exact
          path="start"
          element={loggedIn ? <Start /> : <Navigate replace to={"/"} />}
        />
      </Routes>
    </Router>
    <button onClick={toggleRoute}>Toggle</button>
    </>
  );
}
export default App;

Bhavyashah • Jul 3 '22

Like instagram login and sign-up components???

Saleh Mubashar • Jul 3 '22

yes that is a good use. You can set user roles with this so that only specific people or users
can access the Route. I recently created an app in which I wanted the users to be able to see a Route if they
had solved a quiz, so this trick came in handy

Jack Pritom Soren • Feb 23 '23

Thank you, helpful for me!

Quy Luong • Jul 3 '22

Clean solution, thanks for sharing 👏

Idan Refaeli • Sep 11 '23

Awesome, thanks!

Idan Refaeli • Sep 11 '23

Awesome!