第11课: 路由管理

React Router、路由参数、嵌套路由

课程内容

本课程将详细介绍React应用中的路由管理相关知识和实践技巧，包括React Router的基本使用、路由参数、嵌套路由、受保护路由等核心概念。

核心概念

1. 路由管理基础

• 什么是路由管理
• React Router的作用
• 路由的基本组成部分
• 单页应用与多页应用的区别

2. React Router安装与配置

// 安装React Router
npm install react-router-dom

// 或使用yarn
yarn add react-router-dom

3. 基本路由设置

// 基本路由配置
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

function App() {
  return (
    
      
        } />
        } />
        } />
        } />
      
    
  );
}

export default App;

4. 导航与链接

// 使用Link和NavLink进行导航
import React from 'react';
import { Link, NavLink } from 'react-router-dom';

function Navigation() {
  return (
    
  );
}

export default Navigation;

5. 路由参数

// 路由参数配置
import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

// 文章列表页
function PostList() {
  return (
    

      
文章列表
      

        
文章 1
        
文章 2
        
文章 3
      
    
  );
}

// 文章详情页 - 使用useParams获取路由参数
function PostDetail() {
  const { id } = useParams();
  
  return (
    

      
文章详情
      
文章ID: {id}
      {/* 根据ID获取文章数据并展示 */}
    
  );
}

// 路由配置
function App() {
  return (
    
      
        } />
        } />
        } />
        } />
      
    
  );
}

6. 嵌套路由

// 嵌套路由配置
import React from 'react';
import { Routes, Route, Outlet, Link } from 'react-router-dom';

// 布局组件
function Layout() {
  return (
    

      
      
      {/* 子路由内容将显示在这里 */}
      
    
  );
}

// 仪表盘布局
function DashboardLayout() {
  return (
    

      
仪表盘
      
      
      {/* 仪表盘子路由内容 */}
      
    
  );
}

// 仪表盘子页面
function Profile() {
  return 
个人资料页面
;
}

function Settings() {
  return 
设置页面
;
}

function Stats() {
  return 
统计数据页面
;
}

// 路由配置
function App() {
  return (
    
      
        }>
          } />
          }>
            } />
            } />
            } />
            } />
          
        
        } />
      
    
  );
}

7. 编程式导航

// 编程式导航
import React from 'react';
import { useNavigate } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();
  
  const handleLogin = () => {
    // 登录逻辑
    const isLoggedIn = true;
    
    if (isLoggedIn) {
      // 登录成功后跳转到首页
      navigate('/');
      
      // 或者带状态跳转
      navigate('/dashboard', {
        state: { message: '登录成功' }
      });
      
      // 替换当前历史记录
      // navigate('/dashboard', { replace: true });
      
      // 后退
      // navigate(-1);
      
      // 前进
      // navigate(1);
    }
  };
  
  return (
    

      
登录
      登录
    
  );
}

// 接收状态
function Dashboard() {
  const location = useLocation();
  const message = location.state?.message;
  
  return (
    

      
仪表盘
      {message && 
{message}
}
    
  );
}

8. 受保护路由

// 受保护路由
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './context/AuthContext';

// 受保护路由组件
function ProtectedRoute() {
  const { isAuthenticated, isLoading } = useAuth();
  
  if (isLoading) {
    return 
加载中...
;
  }
  
  if (!isAuthenticated) {
    return ;
  }
  
  return ;
}

// 路由配置
function App() {
  return (
    
      
        } />
        } />
        } />
        
        {/* 受保护的路由 */}
        }>
          } />
          } />
          } />
        
        
        } />
      
    
  );
}

9. 路由守卫

// 路由守卫示例
import React, { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from './context/AuthContext';

// 认证守卫Hook
function useAuthGuard() {
  const { isAuthenticated, isLoading } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  
  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      // 保存当前位置，登录后可以重定向回来
      navigate('/login', {
        state: { from: location }
      });
    }
  }, [isAuthenticated, isLoading, navigate, location]);
  
  return isLoading;
}

// 使用守卫的组件
function ProtectedComponent() {
  const isLoading = useAuthGuard();
  
  if (isLoading) {
    return 
加载中...
;
  }
  
  return (
    

      
受保护的内容
      {/* 组件内容 */}
    
  );
}

// 登录后重定向回原页面
function LoginPage() {
  const { login } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from?.pathname || '/';
  
  const handleLogin = async () => {
    // 登录逻辑
    await login('email', 'password');
    // 登录成功后重定向回原页面
    navigate(from, { replace: true });
  };
  
  return (
    

      
登录
      登录
    
  );
}

10. 路由配置最佳实践

• 集中式路由配置
• 动态路由生成
• 路由懒加载
• 路由元数据
• 错误边界

11. 路由懒加载

// 路由懒加载
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 懒加载组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const NotFound = lazy(() => import('./pages/NotFound'));

function App() {
  return (
    
      加载中...