React Router V6 - Redirect inside Route Component

Question

I have the following code from the V5 Documentation:

    <Route exact path="/">
      {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
    </Route>

I know that I have Navigate instead of Redirect in V6, but Navigate seems not to work the exact same way:

    <Route></Route>
      {loggedIn ? <Navigate to="/dashboard" /> : <PublicHomePage />}
    </Route>

Uncaught Error: [Navigate] is not a <Route> component.

How can I archieve this with React Router V6?

Answer 1

In react-router v6 <Route> it's the only component that's able to be child of <Routes>:

So change this logic:

<Route>
    {loggedIn ? <Navigate to="/dashboard" /> : <PublicHomePage />}
</Route>

to this:

<Route path="/" element={loggedIn ? <Navigate to="/dashboard" /> : PublicHomePage}

You can also checkout this article: Private Route in react-router v6

Answer 2

Try

 <Route path="/" element={ <Navigate to="/dashboard" /> } />

Because Route return the element for a path, so for the path '/', return Navigate for redirect

Answer 3

V5

<Route exact path="/">
  ...
</Route>

V6

<Route path="/" element={...}/>