当前位置：首页 > React

react如何实现路由跳转

2026-03-10 15:43:57React

使用 react-router-dom 实现路由跳转

React 应用中实现路由跳转通常使用 react-router-dom 库。以下是几种常见的路由跳转方式：

安装依赖

npm install react-router-dom

声明式导航（使用 Link 组件）

在组件中引入 Link 组件，通过 to 属性指定目标路由：

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

function NavBar() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

编程式导航（使用 useNavigate Hook）

在函数组件中通过 useNavigate Hook 实现编程式跳转：

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

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

  const handleClick = () => {
    // 跳转到指定路径
    navigate('/profile');

    // 带参数跳转
    navigate('/user/123');

    // 替换当前路由（不保留历史记录）
    navigate('/login', { replace: true });

    // 带状态跳转
    navigate('/dashboard', { state: { from: 'home' } });
  };

  return <button onClick={handleClick}>Go to Profile</button>;
}

路由参数传递与获取

传递参数

// 通过 URL 参数
navigate('/user/123');

// 通过查询参数
navigate('/search?query=react');

// 通过状态对象
navigate('/details', { state: { id: 1 } });

获取参数

import { useParams, useLocation, useSearchParams } from 'react-router-dom';

function UserPage() {
  // 获取路径参数
  const { id } = useParams();

  // 获取状态参数
  const location = useLocation();
  const stateData = location.state;

  // 获取查询参数
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');

  return <div>User ID: {id}</div>;
}

路由配置示例

基本的路由配置示例：

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

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

重定向实现

使用 Navigate 组件实现重定向：

react如何实现路由跳转

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

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