开启React路由的探索之旅

山有木兮木有枝_
175 阅读5分钟

前言

React 路由是现代单页应用的核心基础，它通过 URL 变化管理组件展示逻辑，实现无刷新页面切换。作为 React 官方的路由解决方案，react-router-dom 提供了声明式的路由配置和灵活的导航控制。我将带你明白路由基础实现、三种参数传递方式以及集中式路由配置模式。

  • React 路由是什么？

    • 路由用于控制单页应用中不同组件的展示，通过 URL 的变化来切换组件。
    • 单页应用只有一个 HTML 文件，页面切换通过组件控制实现。
    • React 官方提供了 react-router-dom 包，帮助开发者实现路由功能。

  • 路由怎么实现的？

    • 安装 react-router-dom，引入 BrowserRouter、Routes 和 Route 组件。
    • 使用 BrowserRouter 包裹整个应用，声明使用浏览器历史模式。
    • 通过 Routes 和 Route 配置路由规则，指定路径和对应的组件。
    • 使用 Link 组件实现导航，点击链接自动切换 URL 并展示对应的组件。
    • BrowserRouter：history模式 的路由， HashRouter:hash模式比history多了一个#号符
    • Routes:路由出口，是一个路由列表
    • Route:路由列表项，配置了路径和组件的映射关系
import { BrowserRouter, Routes, Route, Link} from "react-router-dom";

import About from "./views/About.jsx";
import Home from "./views/Home.jsx";
import User from "./views/User.jsx";
function App() {
  return (
    <div>
      <BrowserRouter>
        <Link to={"/home"}>首页</Link>
        <Link to={"/about"}>关于</Link>
       
        <Routes>
          <Route path="/home" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
          <Route path="/user" element={<User />}></Route>
          {/* 配置Routes出口后会默认给一个标签<Home></Home> */}
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

现需要注意的是单个html里面配置的路由，要使用标签包裹其他标签例如：标签

  • 动态跳转与参数传递

    • 除了使用 Link，还可以使用 useNavigate 钩子函数实现编程式导航。

    • 在组件中引入 useNavigate，调用返回的函数并传入目标路径，实现跳转。

    • 路由跳转时可携带参数，如 navigate('/user?id=1')。

    • 在目标组件中使用 useSearchParams 钩子获取 URL 中的参数。

    import {useNavigate } from "react-router-dom"
function Home(){
const navigate = useNavigate()
return(
  <div>主页
     <button onClick={()=>{navigate('/user?id=1')}}>去用户页面</button>
     {/* 路由传参 */}
  </div>
 
)
}

export default Home

  通过useNavigate跳转 到user界面并在路径当中传递参数

    
    import { useSearchParams } from "react-router-dom"
function User(){
  const [params] = useSearchParams() 
  return (
    <div>
      <h1>用户页面---{params.get('id')}</h1>
    </div>
  )
}
export default User;

在user中通过useSearchParams拿到Home页面中传递过来的参数，除了这种传参方式以外还有另外两种传参方式

路由的三种传参方式：

1. **查询参数传参 **
  • 发送参数： 
    navigate('/home?id=1')
  • 获取参数： 
    import { useSearchParams } from "react-router-dom";

function Home() {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id'); // '1'
}
  • 特点：
    • 参数显示在 URL 中（/home?id=1）
    • 刷新页面参数保留
    • 适合传递简单数据（筛选条件、分页等）
    注意：v6版本使用uselocation()获取参数
2. **路径参数传参 **
  • 路由配置： 
    <Route path="/user/:id" element={<User />} />
  • 发送参数： 
    navigate('/user/1')
  • 获取参数： 
    import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams(); // { id: '1' }
}
  • 特点：
    • 参数成为 URL 的一部分（/user/1）
    • 刷新页面参数保留
    • 适合资源定位（用户ID、文章ID等）
    • 参数值始终是字符串类型
3. 状态传参 (State)

  • 发送参数：

    navigate('/dashboard', {
  state: { 
    id: 1,
    name: "John"
  }
})

  • 获取参数：

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

function Dashboard() {
  const location = useLocation();
  const { id, name } = location.state || {};
}

  • 特点：

    • 参数不会显示在 URL 中
    • 刷新页面参数会丢失（只存在于会话历史中）
    • 适合传递敏感数据或大对象
    • 需要处理可能的 undefined 状态

关键区别总结

特性查询参数路径参数状态传参
URL 可见性可见 (?id=1)可见 (/user/1)不可见
参数类型字符串字符串任意类型
路由配置不需要特殊配置需要定义参数路径不需要配置
使用场景筛选条件、分页资源标识、固定参数敏感数据、临时状态
获取方式useSearchParams()useParams()useLocation().state

集中式路由配置的配置方式（另一种路由配置方式）

  • 集中式路由配置，将所有配置路由都放在一个文件中，方便管理（）
  • 路由的懒加载：将每个路由组件都用React.lazy包裹，然后通过React.Suspense包裹起来， 这样当某个路由被访问时，才会加载对应的组件（为提高首页加载速度）。
import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
  useRoutes,
} from "react-router";

const Login=React.lazy(()=>import("../Pages/Login"))
const routes = [
  {
    path: "/",
    element: <noteClass />,
  },
  {
    path: "/login",
    element: <Login />,
  },
];
 function WrapperRoutes() {
  // useRoutes这个hooks只能被用在路由组件中，该组件不能被抛出
  //<Routes></Routes>
  let ele = useRoutes(routes);
  return ele;
}


export default function WrapperRouter(){
  return (
    <BrowserRouter>
      <WrapperRoutes />
    </BrowserRouter>
  )
}
与传统方式的对比
特性组件式路由集中式路由
配置位置分散在各组件中集中在单一文件
可维护性修改需查找多个文件修改只需一个文件
懒加载需在每个组件单独处理统一处理更简洁
路由结构嵌套结构分散整体结构一目了然
适用场景小型项目中大型项目

总结

  1. 基础路由搭建

    • BrowserRouter 作为路由容器
    • Routes/Route 定义路径-组件映射
    • Link 实现声明式导航

  2. 参数传递三方式

    方式适用场景获取方法数据持久性
    查询参数筛选条件/分页useSearchParams()✅
    路径参数资源ID定位useParams()✅
    状态参数敏感数据/大对象useLocation().state❌

  3. 集中式路由优势

    • 统一管理路由配置，提升可维护性
    • 配合 React.lazy + Suspense 实现按需加载
    • 特别适合中大型项目架构
avatar
文章
阅读
粉丝