当前位置：首页 > React

react路由实现跳转

2026-01-26 17:25:04React

React 路由跳转的实现方法

在 React 中，路由跳转可以通过 react-router-dom 库实现。以下是几种常见的路由跳转方式：

使用 Link 组件导航

Link 是 react-router-dom 提供的组件，用于声明式导航，类似于 HTML 的 <a> 标签：

import { Link } from 'react-router-dom';

function App() {
  return (
    <Link to="/about">跳转到 About 页面</Link>
  );
}

使用 useNavigate Hook（函数式跳转）

在函数组件中，可以通过 useNavigate Hook 实现编程式导航：

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/about')}>跳转</button>
  );
}

传递参数跳转

通过路由跳转时，可以传递状态参数或路径参数：

// 方式1：通过状态传递
navigate('/user', { state: { id: 123 } });

// 方式2：通过路径传递（需提前配置路由）
navigate('/user/123');

路由重定向

使用 Navigate 组件或在逻辑中实现重定向：

import { Navigate } from 'react-router-dom';

function PrivateRoute() {
  const isAuth = false;
  return isAuth ? <Dashboard /> : <Navigate to="/login" />;
}

注意事项

确保项目已安装 react-router-dom（v6 及以上版本）。
路由跳转前需在根组件中配置好路由路径（通过 BrowserRouter 和 Routes）。
路径参数需与路由配置中的动态段（如 /user/:id）匹配。

路由配置示例

完整的路由配置通常如下：

react路由实现跳转

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}