React Router V6 - 在路由组件内重定向

Question

我有以下来自 V5 文档的代码：

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

我知道我在 V6 中使用的是 Navigate 而不是 Redirect，但是 Navigate 的工作方式似乎并不完全相同：

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

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

如何使用 React Router V6 实现此目的？

Answer 1

尝试

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

因为 Route return 路径的元素，所以对于路径 '/'，return Navigate for redirect

Answer 2

w=14=shw=16=B5=18=shw=12=sh w=10=sh È=14=ÈтÈ=16=ХТВШШ=18=ÈтÈ=12=Èт w=11=sh

Answer 3

在 react-router v6 <Route> 中，它是唯一能够成为 <Routes>:

子组件的组件

所以改变这个逻辑：

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

对此：

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

您还可以查看这篇文章：Private Route in react-router v6

React Router V6 - 在路由组件内重定向

React Router V6 - Redirect inside Route Component

reactjs

react-router

react-router-dom