react-router-dom 库作用

**`react-router-dom`**是一个用于在 React 应用中实现路由功能的重要库

一、实现页面导航

1. 声明式路由定义

1.1 基本原理

使用`react-router-dom`可以在代码中直接定义一个路由规则,如从`/home`路径导航到`Home`组件。

1.2 代码示例

`Router` 路由根容器,`Routes` 包裹所有的路由规则,`Route` 定义了一条具体的路由,包括路径(`path`)和对应的组件(`element`)。

javascript 复制代码
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Home from "./Home";

import About from "./About";



const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/home" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </Router>

  );

};



export default App;

2. 动态路由匹配

2.1 处理可变路径参数

可以定义一个路由路径为`/user/:id`,其中`:id`就是动态参数。

2.2 代码示例

javascript 复制代码
import {

  BrowserRouter as Router,

  Route,

  Routes,

  useParams,

} from "react-router-dom";



const UserDetail = () => {

  const { id } = useParams();

  return (

    <div>

      <h1>User Detail for ID: {id}</h1>

    </div>

  );

};



const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/user/:id" element={<UserDetail />} />

      </Routes>

    </Router>

  );

};



export default App;

二、嵌套路由和布局管理

1. 嵌套路由实现

1.1 构建多层级页面结构

例如:有一个父路由`/blog`,其下包含子路由`/blog/posts`(文章列表)和`/blog/post/:id`(单个文章详情)。

1.2 代码示例

javascript 复制代码
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Blog from "./Blog";

import BlogPosts from "./BlogPosts";

import BlogPostDetail from "./BlogPostDetail";



const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/blog" element={<Blog />}>

          <Route path="posts" element={<BlogPosts />} />

          <Route path="post/:id" element={<BlogPostDetail />} />

        </Route>

      </Routes>

    </Router>

  );

};



export default App;

2. 布局管理与共享布局组件

2.1 统一布局应用

假设我们有一个名为`Layout`的布局组件,包含了导航栏和侧边栏。

2.2 代码示例

javascript 复制代码
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Layout from "./Layout";

import Home from "./Home";

import About from "./About";



const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Layout />}>

          <Route path="home" element={<Home />} />

          <Route path="about" element={<About />} />

        </Route>

      </Routes>

    </Router>

  );

};



export default App;

三、代码分割和懒加载

1. 懒加载原理和优势

1.1 优化初始加载性能

例如:将每个模块的组件懒加载,使得应用在初始启动时只加载必要的组件。

1.2 代码示例

javascript 复制代码
import {

  BrowserRouter as Router,

  Route,

  Routes,

  lazy,

  Suspense,

} from "react-router-dom";



const Dashboard = lazy(() => import("./Dashboard"));

const Reports = lazy(() => import("./Reports"));

const Settings = lazy(() => import("./Settings"));



const App = () => {

  return (

    <Router>

      <Routes>

        <Route

          path="/dashboard"

          element={

            <Suspense fallback={<div>Loading...</div>}>

              <Dashboard />

            </Suspense>

          }

        />

        <Route

          path="/reports"

          element={

            <Suspense fallback={<div>Loading...</div>}>

              <Reports />

            </Suspense>

          }

        />

        <Route

          path="/settings"

          element={

            <Suspense fallback={<div>Loading...</div>}>

              <Settings />

            </Suspense>

          }

        />

      </Routes>

    </Router>

  );

};



export default App;
相关推荐
拉不动的猪4 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程20 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041228 分钟前
Netty编解码器详解与实战
前端
袁煦丞32 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript