路由跳转

博客不能只有一个页面：首页看文章列表，点标题要能跳去详情页。"根据地址显示不同页面"就是路由。React 生态中最常用的是 react-router-dom。本章给博客加上首页与详情页两个路由，实现页面间的跳转。

安装与整体结构

在项目根目录执行命令安装依赖：

npm install react-router-dom

安装完成后，用 BrowserRouter 把整个应用包起来，再在 App 里用 Routes + Route 声明"地址 → 组件"的映射：

// main.jsx
import { BrowserRouter } from "react-router-dom";
import App from "./App";

createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// App.jsx
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import PostDetail from "./pages/PostDetail";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/post/:id" element={<PostDetail />} />
    </Routes>
  );
}

path 里带冒号的 :id 是动态参数，/post/1、/post/2 会匹配到同一个 PostDetail 组件。

用 Link 跳转

页面内跳转不要用 <a> 标签：<a> 会触发整页刷新，React 内存里的状态全部丢失。要用 Link，它只做"视图级"的切换：

import { Link } from "react-router-dom";

function ArticleCard({ post }) {
  return (
    <article>
      <h2>
        <Link to={`/post/${post.id}`}>{post.title}</Link>
      </h2>
    </article>
  );
}

点击文章标题即可跳转到对应详情地址。

编程式跳转 useNavigate

Link 适合"点击即跳"；而提交表单、倒计时结束等场景需要在代码里跳转，这时用 useNavigate：

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();
  return <button onClick={() => navigate("/post/1")}>阅读最新文章</button>;
}

navigate 就是"跳转函数"，传入目标路径即可。

读取参数与 404 页

详情页要用 useParams 取出 :id；同时给 Routes 加一条 path="*" 的通配路由，兜住所有未匹配的地址：

import { useParams } from "react-router-dom";

function PostDetail() {
  const { id } = useParams(); // 访问 /post/3 时 id 为 "3"
  return <h1>正在查看文章 {id}</h1>;
}

<Route path="*" element={<h1>404，页面不存在</h1>} />

小结

路由 = BrowserRouter 包裹 + Route 声明映射 + Link/navigate 跳转 + useParams 取动态参数。下一步，让页面在渲染完成后自动去请求数据——这就要请出 useEffect 了。