React路由快速上手：核心概念及基本使用

React Router 是 React 生态中用于实现单页面应用（SPA）路由功能的官方库，它通过组件化的方式管理路由逻辑，使页面导航更加灵活和高效。以下从核心概念、使用方法两个方面进行介绍：

一、核心概念

1. 路由（Route）

• 定义：路由是路径（URL）与组件的映射关系，当 URL 匹配特定路径时，渲染对应的组件。
• 示例：路径 /users 对应 Users 组件。

2. 路由匹配

• React Router 根据 URL 路径模式（如 /users/:id）匹配并解析参数。
• 动态路由参数：:id 表示动态参数，可通过 useParams() 获取。

3. 导航组件

• <Link> ：声明式导航组件，渲染为 <a> 标签但阻止默认行为，使用 React Router 的导航逻辑。
• useNavigate：函数式导航 hook，用于编程式导航（如点击按钮跳转）。

4. 路由上下文

• useLocation：获取当前 URL 信息（如路径、查询参数）。
• useParams：获取动态路由参数（如 /users/123 中的 id=123）。

二、使用方法

1. 初始化一个React项目

• npx create-react-app router
  • 安装到项目目录下
• cd my-app
  • 进入项目
• npm start
  • 安装完成后即可运行查看
• npm install --save react-router-dom
  • 安装 react-router-dom

主要文件如下

实现如下页面跳转的效果

2. 页面实现

About.jsx

function About(){
    return(
        <div>
            <h1>about</h1>
        </div>
    )
}
export default About;

Home.jsx

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


function Home(){
    const navigate=useNavigate()
    return(
        <div>
            <h2>Home Page</h2>
            <button onClick={()=>{navigate('/user?id=1')}}>去用户页面</button>
        </div>
    )
}
export default Home;

• 渲染一个包含标题和按钮的页面
• 点击按钮时，使用 useNavigate 钩子导航到 /user 页面
• 传递查询参数 id=1（URL 会显示为 /user?id=1）

User.jsx

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

function User(){
    const [params]=useSearchParams();
    return(
        <h4>用户页面--{params.get('id')}</h4>
    )
}
export default User;

• 使用useSearchParams钩子从 URL 中获取查询参数 id（例如：/user?id=1 中的 id 值）

• useSearchParams 返回一个数组：

  • 第一个元素 params：类似 URLSearchParams 对象，用于读取查询参数
  • 第二个元素 setParams：用于更新查询参数（此组件未使用）

3. 配置路由，创建导航链接

import Home from "./views/Home";
import About from "./views/About";
import User from "./views/User";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Link to="/home">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/user">用户</Link>
        <Routes>
          <Route path="/home" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
          <Route path="/user" element={<User />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

1. 路由配置

• 使用 BrowserRouter 作为路由容器，处理 URL 与组件的映射关系，提供 HTML5 History API（pushState、replaceState）支持的路由容器，监听浏览器 URL 变化并同步路由状态。

底层原理： 维护一个历史记录栈，跟踪浏览历史；当 URL 变化时，触发路由匹配逻辑

• 使用Routes作为路由匹配的入口点，渲染第一个与当前 URL 匹配的 Route 子组件。

特性：

• 排他匹配：只渲染第一个匹配的路由（类似 v5 的 <Switch>）。

• 路径优先级：较长、较具体的路径优先匹配（如 /user/profile 优先于 /user）。

• 使用Route 定义路径（path）与组件（element）的映射关系，当 URL 匹配时渲染对应组件。

2. 导航菜单

• 通过 <Link> 声明式导航组件，渲染为 <a> 标签，但使用 React Router 的导航逻辑

与原生 <a> 的区别：

• <a href>：会触发浏览器刷新整个页面。
• <Link to>：仅更新 URL 并触发路由渲染，保持 SPA 的单页体验。