React Router 中如何使用 withRouter 高阶组件？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 React Router 中，withRouter 是一个高阶组件（HOC），用于将 history、location 和 match 这三个路由相关的 props 注入到非路由组件的组件中。使用 withRouter 可以让那些没有被 <Route> 直接包裹的组件也能访问到路由信息。

使用示例

// www.javascriptcn.com code example
import React from 'react';
import { withRouter } from 'react-router-dom';

function MyComponent({ history, location, match }) {
  return (
    <div>
      <p>当前路径: {location.pathname}</p>
      <button onClick={() => history.push('/new-path')}>跳转到新路径</button>
    </div>
  );
}

export default withRouter(MyComponent);

关键点

withRouter 会将 history、location 和 match 作为 props 传递给被包裹的组件。
使用 withRouter 后，组件可以访问路由信息，即使它不是由 <Route> 直接渲染的。

本题详细解读

1. `withRouter` 的作用

withRouter 是 React Router 提供的一个高阶组件，用于将路由相关的 props（history、location 和 match）注入到组件中。这对于那些没有被 <Route> 直接包裹的组件非常有用，因为它们无法直接访问这些路由信息。

2. `history`、`location` 和 `match` 的含义

history: 提供了对浏览器历史记录的访问和控制方法，如 push、replace 和 goBack 等。
location: 表示当前 URL 的信息，包括 pathname、search 和 hash 等。
match: 包含与当前 URL 匹配的信息，如 params、path 和 url 等。

3. 使用场景

当你在一个组件中需要根据路由信息进行条件渲染或导航时。
当组件没有被 <Route> 直接包裹，但需要访问路由信息时。

4. 注意事项

withRouter 不会订阅路由变化，因此如果路由发生变化，组件不会自动重新渲染。如果需要响应路由变化，可以使用 useEffect 钩子来监听 location 的变化。
在 React Router v6 中，withRouter 已被移除，推荐使用 useNavigate、useLocation 和 useParams 等钩子来替代。

5. 替代方案（React Router v6）

在 React Router v6 中，withRouter 已被移除，推荐使用以下钩子来替代：

// www.javascriptcn.com code example
import { useNavigate, useLocation, useParams } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();

  return (
    <div>
      <p>当前路径: {location.pathname}</p>
      <button onClick={() => navigate('/new-path')}>跳转到新路径</button>
    </div>
  );
}

通过使用这些钩子，你可以更灵活地访问和操作路由信息。

React Router 中如何使用 withRouter 高阶组件？