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

推荐答案

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

使用示例

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------

-------- ------------- -------- --------- ----- -- -
  ------ -
    -----
      -------- -----------------------
      ------- ----------- -- ------------------------------------------
    ------
  --
-

------ ------- ------------------------

关键点

• 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 已被移除，推荐使用以下钩子来替代：

-- -------------------- ---- -------
------ - ------------ ------------ --------- - ---- -------------------

-------- ------------- -
  ----- -------- - --------------
  ----- -------- - --------------
  ----- ------ - ------------

  ------ -
    -----
      -------- -----------------------
      ------- ----------- -- --------------------------------------
    ------
  --
-

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