reactjs - 如何在 react-router-dom v6 中使用 React Routing Navigate 而不是重定向

Question

我在教程中看到过这个

在导航组件中

<li><NavLink to='/'>Home</NavLink></li>

在另一个组件中

import Navigation from './Headers/Navigation' 
import Home from './Body/Home'
<Navigation />   
<Switch>
<Route path='/' exact component={Home} />
<Redirect from ='/' to='/Home'/>
<Switch />

我试图了解最新的更新并通过以下方式尝试了上面的代码:

<Routes>
<Route path='/' element={<Navigate to='/Home' />} />
<Routes>

但我真正想要的却行不通

Answer 1

您仍然需要 呈现您要重定向到的路线。请注意，要使重定向在 Switch 组件中正常工作，Home 组件需要在 路径上呈现> "/" 否则 Home 将匹配并呈现并且永远不会到达 Redirect。

v5

<Switch>
  <Route path='/home' component={Home} />
  <Redirect from ='/' to='/home'/>
<Switch />

v6

<Routes>
  <Route path='/home' element={<Home />} />
  <Route path='/' element={<Navigate to='/home' replace />} />
<Routes>