如何在 react-router-dom v6 中使用 React 路由导航而不是重定向答案

【问题标题】：How to Using React Routing Navigate instead Redirect in react-router-dom v6如何在 react-router-dom v6 中使用 React 路由导航而不是重定向
【发布时间】：2021-12-30 15:00:02
【问题描述】：

我在教程中看到了这个

在导航组件中

<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>

但我真正想要的不起作用

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

你仍然需要来渲染你重定向到的路线。请注意，要使重定向在 Switch 组件中正常工作，Home 组件需要在路径上呈现 "/" 否则 Home 将匹配和渲染，Redirect 将永远无法到达。

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

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

【讨论】：

@JNJonyHossain 对不起，“毕竟它的工作”？你能澄清一下吗？

【解决方案2】：

试试这个

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

【讨论】：

它不工作
你说的是默认路由吧？我的意思是当你的路由中不存在请求的路由时的默认路由。

【解决方案3】：

重定向现在有了一个新名称 => Navigate 和 Switch 现在有了新名称 => Routes

所以使用，

import {Routes, Navigate} from 'react-router-dom';

而不是

import {Switch, Redirect} from 'react-router-dom';

要感谢我吗？大声说“Jay Hind”。

【讨论】：