react router dom 跳转方法
React Router Dom 是 React 应用开发中常用的路由管理工具，它可以帮助我们在单页面应用（SPA）中实现页面的跳转和导航。本文将为你介绍 React Router Dom 中常用的跳转方法，并逐步详细解释每个方法的使用。
React Router Dom 提供了多个跳转方法，包括 `Link`、`NavLink`、`Redirect` 和编程式导航。接下来我们将依次介绍这些方法及其用法。
1. `Link` 组件：
  `Link` 是 React Router Dom 提供的最基本的跳转组件，它可以让你在应用中定义链接和路径，并在点击链接时进行页面的跳转。下面是一个简单的示例代码：
  jsx
  import { Link } from "react-router-dom";
  function MyComponent() {
    return (
      <div>
        <Link to="/example">跳转到示例页面</Link>
      </div>
    );
  }
 
  在上面的代码中，我们通过 `to` 属性指定了要跳转的路径 "/example"，当用户点击 "跳转到示例页面" 这个链接时，页面将会跳转到指定路径。
2. `NavLink` 组件：
  `NavLink` 组件是 `Link` 的扩展，它可以自动添加样式以指示当前活动的链接。通过添加 `a
ctiveClassName` 属性，我们可以为导航链接添加一个类名，以便在当前页面上显示不同的样式。下面是一个示例代码：
  jsx
  import { NavLink } from "react-router-dom";
  function MyComponent() {
    return (
      <div>
        <NavLink to="/example" activeClassName="active">跳转到示例页面</NavLink>
      </div>
    );
  }
 
  在上面的代码中，我们通过 `activeClassName` 属性指定了一个名为 "active" 的类名，当导航链接对应的路径与当前页面路径匹配时，该类名将会被添加到链接的 className 中，从而可以为该链接添加特定样式。
3. `Redirect` 组件：
  `Redirect` 组件用于在 React Router Dom 中进行重定向操作。通过指定 `to` 属性，我们可以将用户重定向到指定的路径。下面是一个示例代码：
  jsx
  import { Redirect } from "react-router-dom";
  function MyComponent() {
    return (
      <div>
        <Redirect to="/example" />
      </div>
    );
  }
 
  在上面的代码中，当 `MyComponent` 组件被渲染时，页面将会立即跳转到指定路径 "/example"。
4. 编程式导航：
  在某些情况下，我们可能需要在 React 组件的逻辑中编程式地进行页面跳转。React Router Dom 提供了 `useHistory` 钩子和 `history` 对象来帮助我们实现此类导航操作。下面是一个示例代码：
  jsx
  import { useHistory } from "react-router-dom";
  function MyComponent() {
    const history = useHistory();
    function handleClick() {
      history.push("/example");
    }
    return (
      <div>
        <button onClick={handleClick}>跳转到示例页面</button>
      </div>
    );
  }
 
  在上面的代码中，我们使用 `useHistory` 钩子获取了 `history` 对象，然后在按钮的点击事件中调用了 `history.push` 方法来实现页面跳转。reactrouter6路由拦截
以上就是 React Router Dom 中常用的跳转方法的介绍和使用方法。通过使用这些跳转方法，我们可以在 React 应用中实现页面的跳转和导航。希望本文对你有所帮助！

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