React Router Dom 初步：从传统路由到现代前端导航

写在前面

最近在学习 react-router-dom，深感前端路由的重要性。从最初的后端路由到现在的前端路由，这个演进过程值得我们深思。今天就来聊聊 React Router Dom 7.6.3 的简单实战应用，顺便梳理一下前端路由的发展历程。

路由的前世今生

后端路由时代的回忆

还记得早期的 Web 开发吗？那时候的路由完全由后端控制：

bash 复制代码

用户访问 /about → 服务器处理 → 返回完整的 HTML 页面

这种传统的 MVC 模式虽然简单，但存在明显的问题：

前后端高度耦合
每次页面跳转都需要重新加载
后端工程师既要写逻辑又要管页面

前后端分离的新时代

随着 MVVM 架构的普及，前后端分离成为主流：

Model层：通过 fetch API 获取数据
View层：JSX 负责视图渲染
ViewModel层：useState、useEffect 等实现数据绑定

这种架构让前端彻底当家作主，后端专注于提供 API 接口，前端则通过路由来管理页面导航。

React Router Dom 实战

实际开发中的结构

1. 路由结构设计

bash 复制代码

/                    # 首页
/about              # 关于页面
/user/:id           # 用户详情
/products           # 产品列表
/products/new       # 新增产品
/products/:id       # 产品详情

2. 组件文件组织

根据实际项目结构，（部分）文件组织如下：

bash 复制代码

src/
  main.jsx                    # 应用入口
  App.jsx                     # 主应用组件和路由配置
  App.css                     # 应用样式
  index.css                   # 全局样式
  pages/
    Home/
      index.jsx               # 首页组件
    About/
      index.jsx               # 关于页面组件
    UserProfile/
      index.jsx               # 用户详情页组件
    Products/
      index.jsx               # 产品列表父组件
      ProductDetails.jsx      # 产品详情子组件
      NewProduct.jsx          # 新增产品子组件

3. 性能优化考虑

使用 React.lazy 实现路由懒加载
合理使用 useEffect 避免不必要的重渲染
利用 useParams 获取路由参数而非 props 传递

基础配置

首先看看如何在 React 19 + React Router Dom 7.6.3 中配置基础路由：

jsx 复制代码

// src/App.jsx
import{
  BrowserRouter as Router, // 前端路由
  Routes, // 路由设置
  Route,  // 单条
}from 'react-router-dom'
import { useState } from 'react' 
import './App.css'
import Home from './pages/Home'
import About from './pages/About'
import UserProfile from './pages/UserProfile'
import Products from './pages/Products'
import ProductDetails from './pages/Products/ProductDetails.jsx'
import NewProduct from './pages/Products/NewProduct'

function App() {

  return (
    <>
      {/* 前端路由接管一切，配置 */}
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:id" element={<UserProfile />} />
          <Route path="/products" element={<Products />} >
          {/* 二级路由 */}
          <Route path=":productId" element={<ProductDetails />} />
          <Route path="new" element={<NewProduct />} />
          </Route>
        </Routes>
      </Router>
    </>
  )
}

export default App

这里有几个关键点：

BrowserRouter 使用 HTML5 History API 实现前端路由
Routes 作为路由容器，管理所有路由配置
Route 定义具体的路径和对应组件

动态路由的魅力

动态路由是现代前端应用的核心特性。看看如何处理用户个人页面：

jsx 复制代码

// src/pages/UserProfile/index.jsx
import { 
  useEffect
 } from 'react'

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

const UserProfile = () => {
  const {id} = useParams();
  useEffect(()=>{
    
    console.log(window.location);
  },[])
  return (
    <>
      UserProfile{id}
    </>
  )
}

export default UserProfile

这种设计完全符合 RESTful 规范：

GET /users/:id - 获取用户信息
POST /users - 创建用户
PATCH /users/:id - 更新用户
DELETE /users/:id - 删除用户

嵌套路由的实现

实际项目中，嵌套路由必不可少。以产品管理为例：

jsx 复制代码

import {Outlet} from 'react-router-dom';

const Products = () => {
  return (
    <>
      <h1>产品列表</h1>
      {/* 二级路由的占位符 */}
      <Outlet />
    </>
  )
}

export default Products


// src/App.jsx 中的路由配置
<Route path="/products" element={<Products />}>
  <Route path=":productId" element={<ProductDetails />} />
  <Route path="new" element={<NewProduct />} />
</Route>

Outlet 组件是嵌套路由的核心，它充当子路由的占位符。这样设计的好处是：

父组件可以提供通用的布局和状态
子组件专注于具体的业务逻辑
路由层级清晰，便于维护

页面级组件的设计

每个路由对应的组件都应该是页面级组件，保持简洁明了：

jsx 复制代码

// src/pages/Home/index.jsx
const Home = () => {
  return (
    <>
      首页
    </>
  )
}

export default Home

// src/pages/About/index.jsx
const About = () => {
  return (
    <>
      About
    </>
  )
}

export default About

// src/pages/Products/ProductDetails.jsx
const ProductDetails = () => {
  return (
    <>
      <h1>产品详情</h1>
    </>
  )
}

export default ProductDetails

// src/pages/Products/NewProduct.jsx
const NewProduct = () => {
  return (
    <>
      <h1>NewProduct</h1>
    </>
  )
}

export default NewProduct

React 生态系统的思考

为什么选择 React Router Dom？

React 生态系统的一个显著特点是"少就是多"。React 核心库专注于组件和状态管理，路由功能由专门的库来实现。这种设计哲学的好处是：

模块化：每个库专注于特定功能
可选择性：可以根据项目需求选择合适的方案
可维护性：问题定位更加精准

函数式编程的体现

相比 Vue 的模板化，React 更偏向函数式编程：

jsx 复制代码

// src/pages/UserProfile/index.jsx
const UserProfile = () => {
  const { id } = useParams()
  // 纯函数逻辑
  return <>UserProfile{id}</>
}

这种设计让组件更加predictable，便于测试和维护。

展示

总结

React Router Dom 7.6.3 为我们提供了强大而灵活的前端路由解决方案。通过合理的路由设计，我们可以构建出用户体验优秀的单页应用。

前端路由的发展反映了整个前端技术的演进：从简单的页面跳转到复杂的状态管理，从后端驱动到前端主导。这种变化不仅提升了用户体验，也让前端开发变得更加专业和独立。