当前位置：首页 > article >正文

详细讲一下React中的路由React Router

article 2025/1/5 6:08:57

1. 基本概念

React Router 是 React 的路由管理库，用于在 React 应用中实现页面导航和路由控制。

2. 安装

npm install react-router-dom

3. 基础用法

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

function App() {
  return (
    <BrowserRouter>
      {/* 导航链接 */}
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/user">用户</Link>
      </nav>

      {/* 路由配置 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user" element={<User />} />
      </Routes>
    </BrowserRouter>
  )
}

4. 路由类型

1. BrowserRouter：使用 HTML5 history API

<BrowserRouter>
  {/* 你的应用 */}
</BrowserRouter>

2.HashRouter：使用 URL 的 hash 部分

<HashRouter>
  {/* 你的应用 */}
</HashRouter>

5. 路由导航

1.声明式导航（Link组件）：

<Link to="/about">关于我们</Link>
<Link to="/user/123">用户详情</Link>

2.编程式导航（useNavigate钩子) :

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

function LoginButton() {
  const navigate = useNavigate()
  
  const handleLogin = () => {
    // 登录成功后跳转
    navigate('/dashboard')
    
    // 带参数跳转
    navigate('/user', { state: { id: 123 } })
    
    // 返回上一页
    navigate(-1)
  }
  
  return <button onClick={handleLogin}>登录</button>
}

6. 路由参数

1. URL参数：

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

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

function UserDetail() {
  const { id } = useParams()
  return <div>用户ID：{id}</div>
}

2. 查询参数：

// 使用查询参数
<Link to="/search?keyword=react">搜索</Link>

// 获取查询参数
import { useSearchParams } from 'react-router-dom'

function Search() {
  const [searchParams] = useSearchParams()
  const keyword = searchParams.get('keyword')
  return <div>搜索关键词：{keyword}</div>
}

7. 嵌套路由

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="users" element={<Users />}>
          <Route path=":id" element={<UserDetail />} />
        </Route>
      </Route>
    </Routes>
  )
}

// Layout组件
function Layout() {
  return (
    <div>
      <nav>{/* 导航栏 */}</nav>
      <Outlet /> {/* 子路由渲染位置 */}
    </div>
  )
}

8. 路由守卫（保护路由）

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth() // 检查用户是否登录
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />
  }
  
  return children
}

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

9. 路由钩子

// 1. useLocation - 获取当前路由信息
function Component() {
  const location = useLocation()
  console.log(location.pathname) // 当前路径
  console.log(location.search)   // 查询参数
  console.log(location.state)    // 路由状态
}

// 2. useNavigate - 编程式导航
function Component() {
  const navigate = useNavigate()
  navigate('/path')
}

// 3. useParams - 获取URL参数
function Component() {
  const { id } = useParams()
}

// 4. useSearchParams - 获取查询参数
function Component() {
  const [searchParams, setSearchParams] = useSearchParams()
}

10. 实际应用示例

// 完整的路由配置示例
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 公共路由 */}
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="products" element={<Products />}>
            <Route path=":id" element={<ProductDetail />} />
          </Route>
          
          {/* 需要认证的路由 */}
          <Route path="dashboard" element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          }>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
          
          {/* 404页面 */}
          <Route path="*" element={<NotFound />} />
          
          {/* 重定向 */}
          <Route path="old-path" element={<Navigate to="/new-path" replace />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

11. 最佳实践

1.路由配置集中管理：

// routes.js
const routes = [
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'about', element: <About /> },
      { path: 'users', element: <Users /> }
    ]
  }
]

// App.jsx
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>
  )
}

这些内容涵盖了 React Router 的主要使用方法。记住：