当前位置：首页 > React

react js实现路由跳转

2026-01-27 11:31:36React

使用 React Router 实现路由跳转

React Router 是 React 生态中最常用的路由管理库，支持声明式路由和编程式导航。以下是几种常见的路由跳转方法：

安装 React Router

npm install react-router-dom

声明式导航（Link 组件）

使用 <Link> 组件实现点击跳转，类似 HTML 的 <a> 标签但不会刷新页面：

react js实现路由跳转

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 LoginButton() {
  const navigate = useNavigate();

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

    // 带参数跳转
    navigate('/profile', { state: { userId: 123 } });

    // 替换历史记录（无回退）
    navigate('/settings', { replace: true });
  };

  return <button onClick={handleLogin}>Login</button>;
}

路由参数传递与获取

动态路由参数

react js实现路由跳转

// 路由配置
<Route path="/user/:id" element={<UserProfile />} />

// 组件内获取参数
import { useParams } from 'react-router-dom';
function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

查询参数（URLSearchParams）

// 跳转时传递
navigate('/search?query=react');

// 组件内获取
const [searchParams] = useSearchParams();
const query = searchParams.get('query');

重定向（Navigate 组件）

条件渲染时实现自动跳转：

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

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

路由配置示例

完整路由配置通常放在应用入口文件：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} /> // 404 页面
      </Routes>
    </BrowserRouter>
  );
}