react-router-dom 重新定向

以下是在react-router-dom中实现重定向的两种方法：

1. 在react-router-dom版本V5中，可以使用`Redirect`组件来实现重定向。首先，需要导入`Redirect`组件：

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

然后，在需要进行重定向的地方，使用`Redirect`组件并设置`to`属性为目标路径：

<Redirect to="/xxx" />

2. 在react-router-dom版本V6中，`Redirect`组件被弃用，需要使用`Navigate`组件来实现重定向。首先，需要导入`Navigate`组件：

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

然后，在路由配置中，使用`Route`组件并设置`path`属性为`"*"`，表示匹配所有路径，并将`element`属性设置为`<Navigate to="/xxx" />`来实现重定向：

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

相关问题

react-router-dom5和react-router-dom6的区别

React Router是一个用于构建单页面应用程序的库。它提供了一种在React应用程序中管理路由的方式。React Router DOM是React Router的一个扩展，用于在Web应用程序中进行路由。

React Router DOM 5和React Router DOM 6之间有几个重要的区别：

1. 安装方式：React Router DOM 5使用npm包管理器进行安装，命令为`npm install react-router-dom`。而React Router DOM 6使用yarn进行安装，命令为`yarn add react-router-dom@next`。

2. 路由组件：在React Router DOM 5中，使用`<Route>`组件来定义路由。而在React Router DOM 6中，使用`<Route>`组件的替代方案`<Routes>`来定义路由。

3. 路由匹配方式：React Router DOM 5使用基于路径的匹配方式来确定哪个路由应该被渲染。而React Router DOM 6引入了新的匹配方式，称为元素匹配（element matching），它可以根据组件的类型来匹配路由。

4. 嵌套路由：在React Router DOM 5中，嵌套路由需要使用嵌套的`<Route>`组件来定义。而在React Router DOM 6中，可以使用嵌套的`<Routes>`组件来定义嵌套路由。

5. 动态路由：在React Router DOM 5中，可以通过在路径中使用参数来定义动态路由。而在React Router DOM 6中，可以使用`<Route>`组件的新属性`element`来定义动态路由。

6. 错误处理：React Router DOM 5使用`<Switch>`组件来处理路由匹配错误。而React Router DOM 6使用`<Routes>`组件的新属性`fallback`来处理路由匹配错误。

引入import { useHistory } from "react-router-dom";为什么会报错模块“"react-router-dom"”没有导出的成员“useHistory”

如果在使用 `import { useHistory } from "react-router-dom";` 时出现模块没有导出的成员错误，可能是因为您的 `react-router-dom` 版本过低，或者您的 `react` 版本过低。

请确保您的 `react-router-dom` 版本大于 `5.1.0`，并且您的 `react` 版本大于 `16.8.0`，因为 `useHistory` 是在 `react-router-dom` 版本 `5.1.0` 中引入的，而它是一个自定义的 React Hook，只能在 React 函数组件中使用。

如果您的版本已经是最新的，可能是因为您的项目没有正确安装 `react-router-dom`，请重新安装并确保依赖项正确配置。