react路由实现页面跳转

路由基础配置

在React中实现页面跳转通常使用react-router-dom库。安装依赖包：

npm install react-router-dom

在项目入口文件（如index.js）中配置路由容器：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

路由定义与导航

在组件中定义路由路径与组件的映射关系：

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

function App() {
  return (
    <Routes>
      <Route path="/home" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  );
}

使用Link组件实现声明式导航：

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

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

编程式导航

在事件处理函数中使用useNavigate钩子：

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

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

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

    // 带参数跳转
    navigate('/profile?id=123');

    // 替换当前历史记录
    navigate('/settings', { replace: true });
  };

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

动态路由与参数获取

定义带参数的路由路径：

<Route path="/user/:userId" element={<UserProfile />} />

在目标组件中获取参数：

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

function UserProfile() {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

嵌套路由实现

通过嵌套Route组件实现布局复用：

<Route path="/admin" element={<AdminLayout />}>
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="users" element={<UserList />} />
</Route>

在布局组件中使用Outlet渲染子路由：

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

function AdminLayout() {
  return (
    <div>
      <AdminHeader />
      <Outlet />  {/* 子路由将在此渲染 */}
    </div>
  );
}

路由守卫与权限控制

通过高阶组件实现路由守卫：

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

// 使用方式
<Route path="/private" element={<PrivateRoute element={<PrivatePage />} />} />

404页面处理

添加通配符路由作为兜底处理：

<Route path="*" element={<NotFoundPage />} />