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

推荐答案

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

1. 使用 <Link> 组件：

   // www.javascriptcn.com code example
   import { Link } from 'react-router-dom';
   
   function Navigation() {
     return (
       <nav>
         <Link to="/home">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   }

2. 使用 useNavigate Hook：

   // www.javascriptcn.com code example
   import { useNavigate } from 'react-router-dom';
   
   function MyComponent() {
     const navigate = useNavigate();
   
     const handleClick = () => {
       navigate('/about');
     };
   
     return (
       <button onClick={handleClick}>Go to About</button>
     );
   }

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

   // www.javascriptcn.com code example
   import { useHistory } from 'react-router-dom';
   
   function MyComponent() {
     const history = useHistory();
   
     const handleClick = () => {
       history.push('/about');
     };
   
     return (
       <button onClick={handleClick}>Go to About</button>
     );
   }

本题详细解读

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 版本选择合适的导航方式。