react-router-dom用法

目录

1. 安装配置
2. 基本路由
3. 路由匹配
4. 路由嵌套
5. 路由传参
6. 编程式导航
7. 路由守卫
8. 最佳实践

安装配置

# 安装
npm install react-router-dom

# TypeScript 类型支持
npm install @types/react-router-dom

基本设置

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

基本路由

1. 基本路由配置

<Routes>
  {/* 首页路由 */}
  <Route path="/" element={<Home />} />
  
  {/* 普通路由 */}
  <Route path="/about" element={<About />} />
  
  {/* 404 路由 */}
  <Route path="*" element={<NotFound />} />
</Routes>

2. 路由链接

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

function Navigation() {
  return (
    <nav>
      {/* 基本链接 */}
      <Link to="/">Home</Link>
      
      {/* 带激活状态的链接 */}
      <NavLink 
        to="/about"
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        About
      </NavLink>
    </nav>
  );
}

路由匹配

1. 精确匹配

{/* 只匹配完全相同的路径 */}
<Route path="/users" element={<Users />} />

2. 模糊匹配

{/* 匹配以 /users 开头的所有路径 */}
<Route path="/users/*" element={<Users />} />

3. 重定向

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

{/* 基本重定向 */}
<Route path="/old-path" element={<Navigate to="/new-path" />} />

{/* 条件重定向 */}
function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth();
  
  return isAuthenticated ? children : <Navigate to="/login" />;
}

路由嵌套

1. 基本嵌套

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        {/* 嵌套路由 */}
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users" element={<Users />}>
          {/* 二级路由 */}
          <Route index element={<UserList />} />
          <Route path=":id" element={<UserDetail />} />
        </Route>
      </Route>
    </Routes>
  );
}

// Layout.tsx
import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <nav>{/* 导航内容 */}</nav>
      <main>
        <Outlet /> {/* 渲染子路由 */}
      </main>
    </div>
  );
}

路由传参

1. URL 参数

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

// 组件中获取参数
import { useParams } from 'react-router-dom';

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

2. 查询参数

// 使用查询参数
import { useSearchParams } from 'react-router-dom';

function UserList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const page = searchParams.get('page') || '1';
  
  return (
    <div>
      <p>Current Page: {page}</p>
      <button onClick={() => setSearchParams({ page: '2' })}>
        Next Page
      </button>
    </div>
  );
}

3. 状态传递

// 传递状态
<Link to="/about" state={{ from: 'home' }}>About</Link>

// 获取状态
import { useLocation } from 'react-router-dom';

function About() {
  const location = useLocation();
  const { from } = location.state || {};
  
  return <div>From: {from}</div>;
}

编程式导航

1. 使用 useNavigate

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

function LoginButton() {
  const navigate = useNavigate();
  
  const handleLogin = async () => {
    const success = await login();
    if (success) {
      // 基本导航
      navigate('/dashboard');
      
      // 带参数导航
      navigate('/users/123');
      
      // 带状态导航
      navigate('/about', { state: { from: 'login' } });
      
      // 返回上一页
      navigate(-1);
    }
  };
  
  return <button onClick={handleLogin}>Login</button>;
}

2. 替换历史记录

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

路由守卫

1. 基本认证守卫

function PrivateRoute({ children }) {
  const auth = useAuth(); // 自定义 hook 检查认证状态
  const navigate = useNavigate();
  
  useEffect(() => {
    if (!auth.isAuthenticated) {
      navigate('/login', { 
        replace: true,
        state: { from: location.pathname }
      });
    }
  }, [auth, navigate]);
  
  return auth.isAuthenticated ? children : null;
}

// 使用守卫
<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  }
/>

2. 权限控制

function PermissionRoute({ children, requiredPermission }) {
  const { hasPermission } = usePermissions();
  
  if (!hasPermission(requiredPermission)) {
    return <Navigate to="/unauthorized" />;
  }
  
  return children;
}

最佳实践

1. 路由配置集中管理

// routes.ts
export const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'about', element: <About /> },
      {
        path: 'users',
        element: <Users />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> }
        ]
      }
    ]
  }
];

// App.tsx
import { useRoutes } from 'react-router-dom';

function App() {
  const element = useRoutes(routes);
  return element;
}

2. 懒加载路由

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));

function App() {
  return (
    <Routes>
      <Route
        path="/dashboard"
        element={
          <Suspense fallback={<Loading />}>
            <Dashboard />
          </Suspense>
        }
      />
    </Routes>
  );
}

3. 404 处理

<Routes>
  {/* 其他路由 */}
  <Route path="*" element={<NotFound />} />
</Routes>

总结

1. 路由类型：

   • 基本路由
   • 嵌套路由
   • 动态路由
   • 404 路由

2. 参数传递：

   • URL 参数
   • 查询参数
   • 状态传递

3. 导航方式：

   • 声明式（Link/NavLink）
   • 编程式（useNavigate）

4. 最佳实践：

   • 集中配置
   • 路由懒加载
   • 路由守卫
   • 权限控制