首页 › React › 路由与数据请求

安装

npm install react-router-dom

基本路由

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={<UserList />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  )
}

嵌套路由与布局

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

// 布局组件
function Layout() {
  return (
    <div>
      <header>
        <nav>
          <Link to="/">首页</Link>
          <Link to="/users">用户</Link>
        </nav>
      </header>
      <main>
        <Outlet />    {/* 子路由渲染位置 */}
      </main>
    </div>
  )
}

// App
<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="users" element={<UserList />} />
    <Route path="users/:id" element={<UserDetail />} />
  </Route>
</Routes>

路由参数

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

function UserDetail() {
  const { id } = useParams()                    // /users/123 → { id: "123" }

  const [searchParams, setSearchParams] = useSearchParams()
  const page = searchParams.get('page') || '1'   // /users?page=2 → "2"

  const navigate = useNavigate()

  const goBack = () => navigate(-1)
  const goHome = () => navigate('/')
  const goUser = (id: number) => navigate(`/users/${id}`, {
    state: { from: 'list' }                     // 传递 state
  })

  return <div>User {id}, Page {page}</div>
}

路由守卫

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const user = useAuth()

  if (!user) {
    return <Navigate to="/login" replace />
  }

  return <>{children}</>
}

// 使用
<Route path="/admin" element={
  <ProtectedRoute>
    <Admin />
  </ProtectedRoute>
} />

小结

• BrowserRouter + Routes + Route 定义路由结构。
• 嵌套路由 + <Outlet> 实现布局复用。
• useParams 获取路径参数，useSearchParams 获取查询参数。
• useNavigate 编程式导航。
• Navigate 组件实现路由守卫（跳转到登录页）。

上一节：Redux Toolkit 下一节：Axios 与 SWR

贡献者: 布欧-Lewyon