从多页面到SPA：React Router 路由进阶完全指南(最新推荐)

用户点击链接 → 浏览器发起请求 → 服务器匹配路由 → 返回完整HTML → 页面刷新

URL = 资源的地址（在哪里）
路由 = 根据地址找到资源的过程（怎么找）
返回 = 资源的表述（长什么样）

// 监听hash变化
window.addEventListener('hashchange', () => {
  const hash = window.location.hash;
  // 根据hash渲染对应的组件
  renderPage(hash);
});

// 改变URL但不刷新页面
history.pushState(null, '', '/about');
// 监听popstate事件（注意：pushState不会触发popstate）
window.addEventListener('popstate', () => {
  // 根据当前URL渲染对应的组件
  renderPage(window.location.pathname);
});

src/
├── App.jsx                 # 应用根组件，路由配置中心
├── components/             # 普通业务组件（可复用UI碎片）
│   └── Navigation.jsx      # 导航栏组件
└── pages/                  # 页面级组件（路由直接渲染）
    ├── Home/
    │   └── index.jsx
    ├── About/
    │   └── index.jsx
    ├── UserProfile/
    │   └── index.jsx
    ├── NotFound/
    │   └── index.jsx
    ├── Products/
    │   ├── index.jsx       # 产品列表页（父路由）
    │   ├── Detail/
    │   │   └── index.jsx   # 产品详情页（子路由）
    │   └── New/
    │       └── index.jsx   # 新增产品页（子路由）
    └── ...

import { lazy, Suspense } from 'react';
import { 
  HashRouter as Router,  // 使用HashRouter
  Routes,                // 路由集合容器
  Route,                 // 单条路由配置
  Navigate               // 重定向组件
} from 'react-router-dom';
import Navigation from './components/Navigation';
// 路由懒加载：按需加载页面组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const UserProfile = lazy(() => import('./pages/UserProfile'));
const NotFound = lazy(() => import('./pages/NotFound'));
const Products = lazy(() => import('./pages/Products'));
const ProductDetail = lazy(() => import('./pages/Products/Detail'));
const NewProduct = lazy(() => import('./pages/Products/New'));
const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Navigation />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:id" element={<UserProfile />} />
          {/* 嵌套路由：Products下有子页面 */}
          <Route path="products" element={<Products />}>
            <Route path=":productId" element={<ProductDetail />} />
            <Route path="new" element={<NewProduct />} />
          </Route>
          {/* 重定向：兼容旧链接 */}
          <Route path="/old-path" element={<Navigate to="/new-path" />} />
          {/* 404兜底：匹配所有未定义路径 */}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

// 传统方式：所有页面组件一次性加载
import Home from './pages/Home';      // 不管用不用，都会加载
import About from './pages/About';
// 懒加载方式：只有访问时才加载
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

┌─────────────────────────────────────────────────────────┐
│                    首屏加载                            │
│  ┌─────────────┐                                      │
│  │   App.jsx   │  ← 骨架 + 导航栏                    │
│  │  Navigation │  ← 立即加载                         │
│  └─────────────┘                                      │
│                                                       │
│  按需加载 ↓                                           │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐            │
│  │ Home    │  │ About   │  │ Products│  ← 点击后加载│
│  └─────────┘  └─────────┘  └─────────┘            │
└─────────────────────────────────────────────────────────┘

// components/Navigation.jsx
import { Link } from 'react-router-dom';
function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/user/123">用户中心</Link></li>
        <li><Link to="/products/123">产品详情</Link></li>
        <li><Link to="/products/new">新增产品</Link></li>
      </ul>
    </nav>
  );
}

// 定义动态路由：:id 是参数占位符
<Route path="/user/:id" element={<UserProfile />} />
// UserProfile组件中获取参数
import { useParams } from 'react-router-dom';
function UserProfile() {
  const { id } = useParams();  // 从URL中提取:id的值
  return <h3>User Profile: {id}</h3>;
}

// URL: /products/123
const { productId } = useParams();
console.log(typeof productId);  // "string" 
console.log(productId === 123); // false ❌

const products = [
  { id: 1, name: 'iPhone' },
  { id: 2, name: 'MacBook' }
];
function ProductDetail() {
  const { productId } = useParams();  // "1" 是字符串
  // ❌ 错误：永远找不到匹配项（1 !== "1"）
  const product = products.find(p => p.id === productId);
  // ✅ 正确：手动转换类型
  const product = products.find(p => p.id === Number(productId));
}

// 父路由：Products页面
<Route path="products" element={<Products />}>
  {/* 子路由：产品详情 */}
  <Route path=":productId" element={<ProductDetail />} />
  {/* 子路由：新增产品 */}
  <Route path="new" element={<NewProduct />} />
</Route>

// pages/Products/index.jsx
import { Outlet } from 'react-router-dom';
const Products = () => {
  return (
    <div>
      <h3>产品列表</h3>
      {/* 子路由组件将渲染在这里 */}
      <Outlet />
    </div>
  );
};

// pages/NotFound/index.jsx
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
const NotFound = () => {
  const navigate = useNavigate();
  useEffect(() => {
    const timer = setTimeout(() => {
      navigate('/');  // 编程式跳转到首页
    }, 3000);
    return () => clearTimeout(timer);
  }, [navigate]);
  return <div>页面不存在，3秒后返回首页...</div>;
};

const navigate = useNavigate();
// 跳转到指定路径
navigate('/about');
// 带参数跳转
navigate('/user/123');
// 返回上一页
navigate(-1);
// 前进一页
navigate(1);
// 替换当前历史记录（不能返回）
navigate('/home', { replace: true });

<Route path="*" element={<NotFound />} />

const NotFound = () => {
  const navigate = useNavigate();
  useEffect(() => {
    const timer = setTimeout(() => navigate('/'), 3000);
    return () => clearTimeout(timer);
  }, [navigate]);
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>正在为您跳转至首页...</p>
    </div>
  );
};

<Routes>
  {/* ✅ 精确路由在前 */}
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/user/:id" element={<UserProfile />} />
  {/* ✅ 404兜底永远在最后 */}
  <Route path="*" element={<NotFound />} />
</Routes>

// 从旧路径重定向到新路径
<Route path="/old-path" element={<Navigate to="/new-path" />} />
// 也可以使用replace属性，不产生历史记录
<Route path="/temp" element={<Navigate to="/permanent" replace />} />

// components/PrivateRoute.jsx
import { Navigate } from 'react-router-dom';
const PrivateRoute = ({ children }) => {
  const isLoggedIn = checkAuth();  // 自定义认证逻辑
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }
  return children;
};
// 使用
<Route 
  path="/dashboard" 
  element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  } 
/>

// Query参数示例
import { useSearchParams } from 'react-router-dom';
function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category');
  return (
    <div>
      当前分类：{category}
      <button onClick={() => setSearchParams({ category: 'electronics' })}>
        切换到电子产品
      </button>
    </div>
  );
}

// 对于大型组件，也可以使用lazy
const HeavyChart = lazy(() => import('./components/HeavyChart'));
function Dashboard() {
  const [showChart, setShowChart] = useState(false);
  return (
    <div>
      <button onClick={() => setShowChart(true)}>显示图表</button>
      {showChart && (
        <Suspense fallback={<div>图表加载中...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

┌──────────────────────────────────────────────────────────┐
│                    前端路由知识体系                       │
├──────────────────────────────────────────────────────────┤
│  1. 路由演进                                             │
│     ├── 后端路由 → RESTful → 前后端分离 → SPA             │
│     └── HashRouter → BrowserRouter (History API)        │
│                                                         │
│  2. React Router 核心                                   │
│     ├── Router（路由容器）                               │
│     ├── Routes（路由集合）                               │
│     ├── Route（路由配置）                                │
│     └── Outlet（嵌套路由出口）                           │
│                                                         │
│  3. 核心功能                                             │
│     ├── 路由懒加载（lazy + Suspense）                    │
│     ├── 动态路由（useParams）                            │
│     ├── 嵌套路由（Outlet）                               │
│     ├── 编程式导航（useNavigate）                         │
│     ├── 404处理（path="*"）                               │
│     └── 重定向（Navigate）                                │
│                                                          │
│  4. 进阶技巧                                              │
│     ├── 路由守卫（PrivateRoute）                          │
│     ├── Query参数（useSearchParams）                      │
│     └── 状态传参（useLocation.state）                     │
└──────────────────────────────────────────────────────────┘