React withRouter 作用

在React中，withRouter 是 react-router-dom 库中的一个高阶组件（Higher-Order Component, HOC），它用于将 React 路由器的上下文（context）传递给那些没有直接位于 <Route> 组件内的组件。这样做的目的是为了让这些组件能够访问到路由器提供的属性，如 match、location 和 history 等。

withRouter 的作用

1. 提供路由信息：

   • withRouter 可以将 match、location 和 history 对象传递给被包装的组件。这些对象包含了路由的相关信息，使得组件可以动态地响应路由的变化。

2. 无需嵌套在 <Route> 中：

   • 有时候，你可能希望某个组件能够在不被直接嵌套在 <Route> 组件中的情况下，也能获取到路由信息。使用 withRouter 就可以实现这一点。

使用示例

假设你有一个组件 MyComponent，你想让它能够获取到当前的路由信息，但又不想直接将它放在 <Route> 组件中，这时可以使用 withRouter。

安装 react-router-dom

如果你还没有安装 react-router-dom，可以通过 npm 或 yarn 来安装：

npm install react-router-dom

导入相关模块

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

创建组件

class MyComponent extends React.Component {
  render() {
    // 通过 props 获取路由信息
    const { match, location, history } = this.props;

    return (
      <div>
        <h2>MyComponent</h2>
        <p>Match: {JSON.stringify(match)}</p>
        <p>Location: {JSON.stringify(location)}</p>
        <button onClick={() => history.push('/another-route')}>
          Go to another route
        </button>
      </div>
    );
  }
}

使用 withRouter

通过 withRouter 包装 MyComponent，使其能够接收路由信息。

const MyComponentWithRouter = withRouter(MyComponent);

在应用中使用

在你的应用中使用 MyComponentWithRouter，它将能够访问到路由信息。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import MyComponentWithRouter from './MyComponent';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/my-component" component={MyComponentWithRouter} />
        <Route path="/" component={SomeOtherComponent} />
      </Switch>
    </Router>
  );
}

export default App;

传递的属性

当使用 withRouter 时，它会将以下属性传递给被包装的组件：

• match：包含当前路由的匹配信息，如 params（路径参数）。
• location：包含当前路由位置的信息，如 pathname、search、hash 等。
• history：提供了操作历史记录的方法，如 push、replace、goBack 等。

通过这些属性，组件可以实现诸如导航、动态显示内容等功能。withRouter 的使用使得组件更加灵活，能够在不同的上下文中获取和使用路由信息。