在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`,并根据你使用的版本来选择合适的路由跳转方法。