在React中实现路由跳转通常是使用`react-router-dom`库，它是React官方推荐的路由解决方案，提供了一组导航组件。截至我所知的最新版本，例如`react-router-dom` v5或v6，路由跳转的方式主要有以下几种：
### react-router-dom v5
1. **使用`<Link>`组件**：
  ```jsx
  import { Link } from 'react-router-dom';
 
  <Link to="/about">About</Link>
  ```
2. **使用`<NavLink>`组件**（用于需要知道是否处于激活状态的链接）：
  ```jsx
  import { NavLink } from 'react-router-dom';
 
  <NavLink to="/about" activeClassName="active">About</NavLink>
  ```
3. **编程式导航**：
  - 使用`history.push()`：
    ```jsx
    function SomeComponent({ history }) {
      function handleClick() {
        history.push('/home');
      }
     
      return (
        <button onClick={handleClick}>Go to Home</button>
      );
    }
    ```
  - 使用`place()`（不会在历史记录中留下记录）：
    ```jsx
    function handleClick() {
      place('/home');
    }
    ```
### react-router-dom v6
在`react-router-dom` v6中，`useHistory` 被替换为 `useNavigate`。
1. **使用`<Link>`组件**：
  ```jsx
  import { Link } from 'react-router-dom';
 
  <Link to="/about">About</Link>
  ```
2. **使用`<NavLink>`组件**（自动知道是否处于激活状态的链接）：
  ```jsx
  import { NavLink } from 'react-router-dom';
 
  <NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>About</NavLink>
  ```
3. **编程式导航**：
  - 使用`useNavigate()`：
    ```jsx
    import { useNavigate } from 'react-router-dom';
   
    function SomeComponent() {
      let navigate = useNavigate();
     
      function handleClick() {
        navigate('/home');
      }
     
      return (
        <button onClick={handleClick}>Go to Home</button>
      );
    }
    ```
react router v6 文档  - 使用`navigate()`进行替换，而不是推送：
    ```jsx
    navigate('/home', { replace: true });
    ```
在使用编程式导航时，`navigate` 可以接受一个数字，表示历史堆栈中的跳转，类似于 `(n)`。
```jsx
navigate(-1); // 后退一页
navigate(1);  // 前进一页
```
当在组件外部，比如在Redux的action中需要进行路由跳转时，你无法访问到`useNavigate`钩子。在这种情况下，你可能需要使用更高级的解决方案，如通过Redux中间件来处理路由跳转。
确保你的应用安装了正确版本的`react-router-dom`，并根据你使用的版本来选择合适的路由跳转方法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。