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

1. 基本概念

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

2. 安装

javascript 复制代码
npm install react-router-dom

3. 基础用法

javascript 复制代码
// 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

javascript 复制代码
<BrowserRouter>
  {/* 你的应用 */}
</BrowserRouter>

2.HashRouter:使用 URL 的 hash 部分

javascript 复制代码
<HashRouter>
  {/* 你的应用 */}
</HashRouter>

5. 路由导航

1.声明式导航(Link组件):

javascript 复制代码
<Link to="/about">关于我们</Link>
<Link to="/user/123">用户详情</Link>

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

javascript 复制代码
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参数:

javascript 复制代码
// 路由配置
<Route path="/user/:id" element={<UserDetail />} />

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

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

2. 查询参数:

javascript 复制代码
// 使用查询参数
<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. 嵌套路由

javascript 复制代码
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. 路由守卫(保护路由)

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

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

9. 路由钩子

javascript 复制代码
// 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. 实际应用示例

javascript 复制代码
// 完整的路由配置示例
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.路由配置集中管理:

javascript 复制代码
// 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.懒加载路由:

javascript 复制代码
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 的主要使用方法。记住:

  • 总是在应用最外层包裹 BrowserRouter
  • 使用 Routes 和 Route 定义路由规则
  • 使用 Link 或 useNavigate 进行导航
  • 合理使用路由钩子获取和操作路由信息
  • 需要时使用路由守卫保护私有路由
  • 考虑使用懒加载优化性能
相关推荐
FreeCultureBoy41 分钟前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom1 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom1 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom1 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua3 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI3 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室3 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript