使用 React Router 的 withRouter

使用 React Router 的 withRouter

React Router 是 React 应用中常用的路由管理工具，它可以帮助我们管理页面之间的导航和状态。而 withRouter 则是 React Router 提供的一个高阶组件，用于将路由相关的属性注入到组件中，使得我们可以在不同的组件中访问路由信息。

1. 安装 React Router

首先，确保你的项目已经安装了 React Router。如果没有安装，你可以通过以下命令进行安装：

npm install react-router-dom
1

2. 使用 withRouter

在需要访问路由信息的组件中，使用 withRouter 包装组件，以便注入路由相关的属性。

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  render() {
    // 在这里可以通过 this.props 访问路由相关的属性
    return (
      

        
当前路径: {this.props.location.pathname}
      
    );
  }
}

export default withRouter(MyComponent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 使用注入的路由属性

一旦使用了 withRouter 包装组件，你就可以在组件内部使用 this.props 访问路由相关的属性了，例如：

• location：包含了当前页面的位置信息，如 pathname、search、hash 等。
• history：提供了导航操作的方法，如 push、replace、goBack、goForward 等。
• match：包含了当前页面 URL 与路由配置的匹配信息，如 params 等。

4. 示例代码

以下是一个示例组件，使用了 withRouter 注入路由属性，并在 render 方法中使用了 history 的 goBack 和 goForward 方法来实现页面的后退和前进功能：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Header extends Component {
  back = () => {
    this.props.history.goBack();
  }

  forward = () => {
    this.props.history.goForward();
  }

  render() {
    return (
      

        
I am Component Home
        后退    
        前进 


      
    )
  }
}

export default withRouter(Header);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

5. 总结

通过使用 withRouter，我们可以方便地在任何组件中访问 React Router 提供的路由相关属性，从而实现更灵活的页面导航和状态管理。

6. 参考

• 使用 React Router 的 withRouter
• 完整代码