React Router 6 完全教程

第一章：React Router 6 基础概念

1.1 React Router 6 是什么？

React Router 6 是 React 的官方路由库，用于构建单页应用程序（SPA）的路由系统。

练习 1.1：基本路由配置

创建一个简单的路由应用。

App.jsx

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">首页</Link>
                <Link to="/about">关于</Link>
            </nav>
            
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    )
}

function Home() {
    return <h2>首页</h2>
}

function About() {
    return <h2>关于</h2>
}

export default App
                

第二章：核心概念

2.1 动态路由

使用动态路由参数。

练习 2.1：动态路由示例

展示动态路由的使用。

动态路由示例

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom'

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/users/:id" element={<User />} />
            </Routes>
        </BrowserRouter>
    )
}

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

2.2 嵌套路由

使用嵌套路由组织页面结构。

练习 2.2：嵌套路由示例

展示嵌套路由的使用。

嵌套路由示例

import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom'

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<Home />} />
                    <Route path="about" element={<About />} />
                    <Route path="dashboard" element={<Dashboard />} />
                </Route>
            </Routes>
        </BrowserRouter>
    )
}

function Layout() {
    return (
        <div>
            <nav>
                <Link to="/">首页</Link>
                <Link to="/about">关于</Link>
                <Link to="/dashboard">仪表盘</Link>
            </nav>
            <Outlet />
        </div>
    )
}
                

2.3 编程式导航

使用编程式导航控制路由跳转。

练习 2.3：编程式导航示例

展示编程式导航的使用。

编程式导航示例

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

function Login() {
    const navigate = useNavigate()
    const [username, setUsername] = useState('')

    const handleLogin = () => {
        // 登录逻辑
        navigate('/dashboard', { replace: true })
    }

    return (
        <div>
            <input 
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
            <button onClick={handleLogin}>登录</button>
        </div>
    )
}
                

第三章：路由守卫

3.1 路由守卫实现

使用路由守卫保护特定路由。

练习 3.1：路由守卫示例

展示路由守卫的实现。

路由守卫示例

import { Navigate, useLocation } from 'react-router-dom'

function PrivateRoute({ children }) {
    const location = useLocation()
    const isAuthenticated = // 检查用户是否已认证

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

    return children
}

function App() {
    return (
        <Routes>
            <Route path="/login" element={<Login />} />
            <Route 
                path="/dashboard" 
                element={
                    <PrivateRoute>
                        <Dashboard />
                    </PrivateRoute>
                } 
            />
        </Routes>
    )
}
                

第四章：路由配置

4.1 路由配置最佳实践

路由配置的最佳实践。

练习 4.1：路由配置示例

展示路由配置的最佳实践。

路由配置示例

// routes/index.js
import { lazy } from 'react'
import { Navigate } from 'react-router-dom'

const Home = lazy(() => import('../pages/Home'))
const About = lazy(() => import('../pages/About'))
const Dashboard = lazy(() => import('../pages/Dashboard'))
const Login = lazy(() => import('../pages/Login'))

const routes = [
    {
        path: '/',
        element: <Home />
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/dashboard',
        element: <PrivateRoute><Dashboard /></PrivateRoute>
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '*',
        element: <Navigate to="/" replace />
    }
]

export default routes

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

function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    {routes.map((route, index) => (
                        <Route key={index} {...route} />
                    ))}
                </Routes>
            </Suspense>
        </BrowserRouter>
    )
}
                

第五章：常见问题解答

5.1 常见错误

列举并解决使用 React Router 6 时常见的错误。

常见错误及解决方案

// 错误1：忘记使用 BrowserRouter
// ❌ 错误做法
<Routes>
    <Route path="/" element={<Home />} />
</Routes>

// ✅ 正确做法
<BrowserRouter>
    <Routes>
        <Route path="/" element={<Home />} />
    </Routes>
</BrowserRouter>

// 错误2：在非路由组件中使用路由Hooks
// ❌ 错误做法
function MyComponent() {
    const navigate = useNavigate() // 错误：不在路由上下文中
    return <button onClick={() => navigate('/')}>返回</button>
}

// ✅ 正确做法
function MyComponent() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
            </Routes>
        </BrowserRouter>
    )
}
            

5.2 调试技巧

介绍 React Router 6 的调试工具和技巧。

调试技巧示例

// 1. 使用 useLocation 调试当前路由
import { useLocation } from 'react-router-dom'

function DebugComponent() {
    const location = useLocation()
    console.log('当前路由:', location)
    return null
}

// 2. 使用 useMatch 检查路由匹配
import { useMatch } from 'react-router-dom'

function MyComponent() {
    const match = useMatch('/users/:id')
    console.log('路由匹配:', match)
    return null
}

// 3. 使用 useSearchParams 处理查询参数
import { useSearchParams } from 'react-router-dom'

function SearchComponent() {
    const [searchParams, setSearchParams] = useSearchParams()
    console.log('查询参数:', searchParams.toString())
    return null
}
            