Redirect by auth in React router v6

Question

How can I redirect user depending on auth?

I have multiple different routs App.js:

import React from 'react'
import AuthContextProvider from './Contexts/AuthContext'
import RootContextProvider from './Contexts/RootContext'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Browse from './Routes/Private/Browse/Browse'
import LandingPage from './Routes/LandingPage'
import Login from './Routes/Login'
import ScrollToTop from './ScrollToTop'
import Home from './Routes/Private/Browse/Outlets/Home'
import TVShows from './Routes/Private/Browse/Outlets/TVShows'
import Latest from './Routes/Private/Browse/Outlets/Latest'
import MyList from './Routes/Private/Browse/Outlets/MyList'
import Movies from './Routes/Private/Browse/Outlets/Movies'
import Title from './Routes/Private/Browse/Title'

function App() {
  return (
    <BrowserRouter>
      <AuthContextProvider>
        <RootContextProvider>
          <Routes>
            // Public routes here
            <Route path='/' element={<LandingPage />} />
            <Route path='/login' element={<Login />} />
            // Public routes here // Private routes here
            <Route path='/browse' element={<Browse />}>
              <Route index element={<Home />} />
              <Route path='tv-shows' element={<TVShows />} />
              <Route path='movies' element={<Movies />} />
              <Route path='latest' element={<Latest />} />
              <Route path='my-list' element={<MyList />} />
            </Route>
            <Route path='movie/:id' element={<Title />} />
            <Route path='tv/:id' element={<Title />} />
            // Private routes here
          </Routes>
          <ScrollToTop />
        </RootContextProvider>
      </AuthContextProvider>
    </BrowserRouter>
  )
}
export default App

I have Private routes and Public routes, Depending on auth context I want redirect user to a correct route:

• auth === true
  • If user hit any of public routes redirect to /browse
  • if user hit not found route redirect to /browse
• auth === false
  • If user hit any of private routes redirect to /login
  • if user hit not found route redirect to /

All private routes are accessible when auth === true and all public routes when auth === false

Answer 1

i don't know if i got the problem, but it should be like this:

Component:

const navigate = useNavigate();

const isLoggedIn = () => {
  if(!auth) // Here you check if the user has logged in
    navigate('/login');
}

useEffect(() => {
  isLoggedIn();
},[])
    
    

Answer 2

My auth navigation is handled in a useEffect. I have a profile context that returns isLoading and hasProfile. So if the site has finished loading and you do not have a profile, then it will navigate you to the profile page to create one.

const navigate = useNavigate();
const { hasProfile, isLoading } = useContext(ProfileContext);
useEffect(() => {
    if (!isLoading && !hasProfile) {
        navigate("/profile");
    }
}, [hasProfile, isLoading, navigate])

So for your case you could have an if statement inside the useEffect that would check for auth and then navigate accordingly.

Answer 3

Wrap all your private route with route that has PrivateRoute element in it

<Route element={<PrivateRoute />}>
 // Private routes here
        <Route path='/browse' element={<Browse />}>
          <Route index element={<Home />} />
          <Route path='tv-shows' element={<TVShows />} />
          <Route path='movies' element={<Movies />} />
          <Route path='latest' element={<Latest />} />
          <Route path='my-list' element={<MyList />} />
        </Route>
        <Route path='movie/:id' element={<Title />} />
        <Route path='tv/:id' element={<Title />} />
        // Private routes here
</Route>

In the PrivateRoute implement the condition

 const PrivateRoute = () => {
   const auth = true // use your condition
   
   return auth ? <Outlet/> : <Login />
}

Make sure to import outlet from react router.

In this case auth is true than it give access to all browser page else it redirect to login page