React进行路由跳转的方法汇总

在 React 中进行路由跳转有多种方法，详细取决于你使用的路由库和版本。以下是常见的路由跳转方法汇总，重要基于 react-router-dom 库。
1. 使用 useNavigate 钩子（适用于 react-router-dom v6）

useNavigate 是 react-router-dom v6 中提供的一个钩子，用于在函数组件中进行编程式导航。
示例

1. import { useNavigate } from 'react-router-dom';
3. const MyComponent = () => {
4.   const navigate = useNavigate();
6.   const handleClick = () => {
7.     navigate('/path-to-navigate');
8.   };
10.   return <button onClick={handleClick}>Go to Path</button>;
11. };

复制代码

2. 使用 Navigate 组件（适用于 react-router-dom v6）

Navigate 组件用于在渲染时进行重定向。
示例

1. import { Navigate } from 'react-router-dom';
3. const MyComponent = () => {
4.   return <Navigate to="/path-to-navigate" />;
5. };

复制代码

3. 使用 Link 组件

Link 组件用于在 JSX 中创建导航链接。
示例

1. import { Link } from 'react-router-dom';
3. const MyComponent = () => {
4.   return <Link to="/path-to-navigate">Go to Path</Link>;
5. };

复制代码

4. 使用 useHistory 钩子（适用于 react-router-dom v5）

在 react-router-dom v5 中，可以使用 useHistory 钩子进行编程式导航。
示例

1. import { useHistory } from 'react-router-dom';
3. const MyComponent = () => {
4.   const history = useHistory();
6.   const handleClick = () => {
7.     history.push('/path-to-navigate');
8.   };
10.   return <button onClick={handleClick}>Go to Path</button>;
11. };

复制代码

5. 使用 withRouter 高阶组件（适用于 react-router-dom v5）

在 react-router-dom v5 中，可以使用 withRouter 高阶组件在类组件中进行编程式导航。
示例

1. import React from 'react';
2. import { withRouter } from 'react-router-dom';
4. class MyComponent extends React.Component {
5.   handleClick = () => {
6.     this.props.history.push('/path-to-navigate');
7.   };
9.   render() {
10.     return <button onClick={this.handleClick}>Go to Path</button>;
11.   }
12. }
14. export default withRouter(MyComponent);

复制代码

6. 使用 window.location

固然不保举，但你也可以使用原生的 window.location 对象进行导航。这种方法不会保存欣赏器历史纪录。
示例

1. const MyComponent = () => {
2.   const handleClick = () => {
3.     window.location.href = '/path-to-navigate';
4.   };
6.   return <button onClick={handleClick}>Go to Path</button>;
7. };

复制代码

7. 使用 history 对象（适用于 react-router-dom v4 和 v5）

你可以直接使用 history 对象进行导航。
示例

1. import { createBrowserHistory } from 'history';
3. const history = createBrowserHistory();
5. const MyComponent = () => {
6.   const handleClick = () => {
7.     history.push('/path-to-navigate');
8.   };
10.   return <button onClick={handleClick}>Go to Path</button>;
11. };

复制代码

8. 使用 Redirect 组件（适用于 react-router-dom v5）

Redirect 组件用于在渲染时进行重定向。
示例

1. import { Redirect } from 'react-router-dom';
3. const MyComponent = () => {
4.   return <Redirect to="/path-to-navigate" />;
5. };

复制代码

总结

在 React 中进行路由跳转有多种方法，详细取决于你使用的路由库和版本。常见的方法包括：

• 使用 useNavigate 钩子（适用于 react-router-dom v6）
  
• 使用 Navigate 组件（适用于 react-router-dom v6）
  
• 使用 Link 组件
  
• 使用 useHistory 钩子（适用于 react-router-dom v5）
  
• 使用 withRouter 高阶组件（适用于 react-router-dom v5）
  
• 使用 window.location
  
• 使用 history 对象（适用于 react-router-dom v4 和 v5）
  
• 使用 Redirect 组件（适用于 react-router-dom v5）
  

选择合适的方法可以根据你的详细需求和项目布局。通过这些方法，可以在 React 应用中实现机动的路由跳转。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。