相当于 <重定向到 = "/login" /> 在 react-router-dom v6 中使用导航？

Question

在使用react router dom v5时，我有以下一段代码，如果用户未通过身份验证，则重定向到登录，如果用户通过身份验证则重定向到应用程序的其余部分：

!isAuthenticated ? (
<>
<Route path="/login" exact component={Login} />
<Redirect to="/login" />
</>
) : (
<div className="d-flex flex-column min-vh-100">
<main>
<Container className="mt-4">
<Switch>
<Route path="/" exact component={Home} />
<Route path="/collections" component={Collections} />
<Redirect to="/" />
</Switch>
</Container>
</main>
</div>
)}

在升级到react路由器dom v6之后，我不得不进行一些重构，最终看起来像这样：

!isAuthenticated ? (
<>
<Routes>
<Route path="/login" element={<Login />} />
</Routes>
<Navigate replace to="/login" />
</>
) : (
<div className="d-flex flex-column min-vh-100">
<main>
<Container className="mt-4">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/collections" element={<Collections />} />
</Routes>
<Navigate to="/" />
</Container>
</main>
</div>
)}

据我所知，<Navigate replace to="/login" />相当于<Redirect to="/login" />的反应路由器dom v6，但现在我的代码让我陷入了无限循环。为什么会发生这种情况？

Answer 1

您可以将<Navigate>保留在<Routes>中，如下所示，

<Routes>
<Route path="/"  element={<Navigate replace to="/login" />} />  // OR path='/login'
<Route path='/login' element={<Login/>}
</Routes>