React Router 中如何进行路由跳转？

推荐答案

在 React Router 中，可以通过以下几种方式进行路由跳转：

1. 使用 <Link> 组件：

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

2. 使用 useNavigate Hook：

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

3. 使用 history.push（适用于 React Router v5 及以下版本）：

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

本题详细解读

1. <Link> 组件

<Link> 是 React Router 提供的一个组件，用于在应用中创建导航链接。它类似于 HTML 中的 <a> 标签，但不会导致页面刷新。to 属性指定了目标路由的路径。

2. useNavigate Hook

useNavigate 是 React Router v6 引入的一个 Hook，用于在函数组件中进行编程式导航。它返回一个函数，调用该函数并传入目标路径即可实现路由跳转。

3. history.push

在 React Router v5 及以下版本中，可以使用 useHistory Hook 获取 history 对象，然后通过 history.push 方法进行路由跳转。history.push 会将新路由推入历史记录栈中，用户可以通过浏览器的后退按钮返回上一页。

总结

• React Router v6 推荐使用 useNavigate Hook 进行编程式导航。
• React Router v5 及以下版本 可以使用 history.push 方法。
• 声明式导航 可以使用 <Link> 组件。

根据项目使用的 React Router 版本选择合适的导航方式。