使用 withRouter 和 connect

在 React 中，我们通常使用组件来构建我们的应用程序。在许多情况下，我们需要使用 React Router 来处理 URL 和路由。同时，我们通常使用 Redux 来管理我们的应用程序状态。如何将这两种方法结合起来呢？

在这篇文章中，我们将学习如何使用 withRouter 和 connect 将 React Router 和 Redux 结合起来。

withRouter

withRouter 是一个 React 高阶组件，它将 React Router 的 props（如 match，location 和 history）传递给包装的组件。这使我们能够在我们的组件中访问路由信息。

以下是一个例子：

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

const MyComponent = ({ match, location, history }) => (
  <div>
    <h1>My Component</h1>
    <p>Match: {JSON.stringify(match)}</p>
    <p>Location: {JSON.stringify(location)}</p>
    <p>History: {JSON.stringify(history)}</p>
  </div>
);

export default withRouter(MyComponent);

在这个例子中，我们使用 withRouter 包装 MyComponent，并将 match，location 和 history 作为 props 传递给它。现在我们可以在 MyComponent 中访问这些 props，并使用它们来访问我们的路由信息。

connect

connect 是一个高阶函数，它将我们的组件连接到 Redux store。它返回一个新的组件，该组件具有访问 store 中状态的 props。

以下是一个例子：

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ counter }) => (
  <div>
    <h1>My Component</h1>
    <p>Counter: {counter}</p>
  </div>
);

const mapStateToProps = state => ({
  counter: state.counter
});

export default connect(mapStateToProps)(MyComponent);

在这个例子中，我们使用 connect 包装 MyComponent，并将 mapStateToProps 函数作为参数传递给它。这个函数告诉 connect 我们需要 store 中的哪些状态，并将它们作为 props 传递给 MyComponent。

withRouter 和 connect

现在让我们将这两种方法结合起来，以在我们的组件中访问路由信息并访问 Redux store 中的状态。

以下是一个例子：

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

const MyComponent = ({ match, location, history, counter }) => (
  <div>
    <h1>My Component</h1>
    <p>Match: {JSON.stringify(match)}</p>
    <p>Location: {JSON.stringify(location)}</p>
    <p>History: {JSON.stringify(history)}</p>
    <p>Counter: {counter}</p>
  </div>
);

const mapStateToProps = state => ({
  counter: state.counter
});

export default withRouter(connect(mapStateToProps)(MyComponent));

在这个例子中，我们首先使用 withRouter 包装 MyComponent，并在 props 中获得 match，location 和 history 的值。然后，我们使用 connect 包装 MyComponent，并将 mapStateToProps 函数传递给它以获取 store 中的 counter 状态，并将其作为 props 传递给 MyComponent。

现在，我们可以在 MyComponent 中访问路由信息和 store 中的状态，以便使用它们来动态渲染我们的组件。

总的来说，withRouter 和 connect 在 React 开发中是非常有用的工具，它们可以很好地将 React Router 和 Redux 集成在一起，使我们能够更好地构建我们的应用程序。