当前位置：首页 > React

react导航如何实现

2026-02-26 18:13:27React

路由库的选择

React本身不包含内置路由功能，需要借助第三方库。主流选择包括React Router和Next.js。React Router适用于单页应用(SPA)，Next.js适合服务端渲染(SSR)或静态生成的应用。

基础路由配置

安装React Router DOM：

npm install react-router-dom

创建基本路由结构：

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

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

导航链接创建

使用Link组件创建导航：

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

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

动态路由参数

处理带参数的路径：

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

在组件中获取参数：

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

function UserProfile() {
  const { userId } = useParams();
  // 使用userId获取用户数据
}

嵌套路由实现

创建层级导航结构：

<Route path="/products" element={<ProductsLayout />}>
  <Route index element={<ProductList />} />
  <Route path=":productId" element={<ProductDetail />} />
</Route>

在父路由组件中使用Outlet：

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

function ProductsLayout() {
  return (
    <div>
      <h2>Products</h2>
      <Outlet />
    </div>
  );
}

编程式导航

在组件中控制导航：

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

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

  const handleLogin = () => {
    // 登录逻辑
    navigate('/dashboard');
  };

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

路由守卫

实现权限控制：

<Route 
  path="/admin" 
  element={
    <RequireAuth>
      <AdminPage />
    </RequireAuth>
  } 
/>

function RequireAuth({ children }) {
  const auth = useAuth();
  const location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

懒加载路由

优化大型应用性能：

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./HeavyComponent'));

<Route 
  path="/heavy" 
  element={
    <Suspense fallback={<LoadingSpinner />}>
      <LazyComponent />
    </Suspense>
  } 
/>

react导航如何实现