React Router 教程指南 🚀

目录

• React Router 简介
• 安装与配置
• 基础路由使用
• 嵌套路由实践
• 动态路由参数
• 导航组件开发
• [404 页面实现](#404 页面实现)

React Router 简介

React Router 是 React 生态中常用的路由管理库，支持单页应用（SPA）的路由跳转与组件渲染。其核心特性包括：

• 🔄 基于组件的路由系统
• 🧭 支持嵌套/动态路由
• 📡 智能的路由匹配机制
• 📦 与 React 18 的最新兼容性

📌 了解更多 React Router 官方文档 中的高级用法

安装与配置

npm install react-router-dom
# 或
yarn add react-router-dom

// 主入口文件
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
function Root() {
  return <Router><App /></Router>;
}
export default Root;

基础路由使用

// 路由配置示例
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

嵌套路由实践

// 嵌套路由结构
import { Route, Routes } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';
function DashboardLayout() {
  return (
    <Routes>
      <Route index element={<Dashboard />} />
      <Route path="settings" element={<Settings />} />
    </Routes>
  );
}

动态路由参数

// 动态路由示例
<Route path="/user/:id" element={<UserProfile />} />
// 参数获取
const userId = useParams().id;

导航组件开发

// 自定义导航栏
function Navbar() {
  return (
    <nav>
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Link to="/contact">联系</Link>
    </nav>
  );
}

404 页面实现

// 404 页面配置
<Route path="*" element={<NotFound />} />
// 404 页面组件
function NotFound() {
  return <h1>404 - 页面未找到 🚫</h1>;
}

扩展学习

如需深入掌握 React Router 的高级用法，建议访问 React Router 进阶教程 获取完整指南。