React 全栈体系（十七）

已于 2023-09-27 01:23:00 修改
阅读量150 收藏
点赞数
分类专栏： React全栈体系 文章标签： react.js javascript ecmascript
于 2023-09-27 00:39:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sgsgkxkx/article/details/133325860
版权

第九章 React Router 6

一、概述

  • React Router 以三个不同的包发布到 npm 上，它们分别为：

    • react-router: 路由的核心库，提供了很多的：组件、钩子。
    • react-router-dom: 包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。
    • react-router-native: 包括 react-router 所有内容，并添加一些专门用于 ReactNative 的 API，例如:<NativeRouter>等。

  • 与 React Router 5.x 版本相比，改变了什么？

    • 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。

    • 语法的变化：component={About} 变为 element={<About/>}等。

    • 新增多个 hook：useParams、useNavigate、useMatch等。

    • 官方明确推荐函数式组件了！！！

      …

  • 安装：npm install react-router-dom

二、代码实战

1. 一级路由

请添加图片描述

1.1 index.html
<!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>路由测试</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <style>
      .alex {
        background-color: orange !important;
        color: white !important;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
1.2 index.js
/* src/index.js */
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
1.3 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, Routes, Route } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">
              About
            </NavLink>
            <NavLink className="list-group-item" to="/home">
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/home" element={<Home />} />
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
1.4 About.jsx
/* src/pages/About.jsx */
import React from 'react'

export default function About() {
	return (
		<h3>我是About的内容</h3>
	)
}
1.5 Home.jsx
/* src/pages/Home.jsx */
import React from 'react'

export default function Home() {
	return (
		<h3>我是Home的内容</h3>
	)
}

2. 重定向

请添加图片描述

2.1 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, Routes, Route, Navigate } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">
              About
            </NavLink>
            <NavLink className="list-group-item" to="/home">
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                <Route path="/ABOUT" element={<About />} />
                <Route path="/home" element={<Home />} />
                <Route path="/" element={<Navigate to="/about" />} />
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
2.2 Home.jsx
/* src/pages/Home.jsx */
import React, { useState } from "react";
import { Navigate } from "react-router-dom";

export default function Home() {
  const [sum, setSum] = useState(1);
  return (
    <div>
      <h3>我是Home的内容</h3>
      {sum === 2 ? (
        <Navigate to="/about" replace={true} />
      ) : (
        <h4>当前sum的值是：{sum}</h4>
      )}
      <button onClick={() => setSum(2)}>点我将sum变为2</button>
    </div>
  );
}

3. NavLink 高亮

请添加图片描述

App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, Routes, Route, Navigate } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default function App() {
  function computedClassName({ isActive }) {
    return isActive ? "list-group-item alex" : "list-group-item";
  }
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className={computedClassName} to="/about">
              About
            </NavLink>
            <NavLink className={computedClassName} to="/home">
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              <Routes>
                <Route path="/ABOUT" element={<About />} />
                <Route path="/home" element={<Home />} />
                <Route path="/" element={<Navigate to="/about" />} />
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

4. useRoutes 路由表

4.1 routes
/* src/routes/index.js */
import About from "../pages/About";
import Home from "../pages/Home";
import { Navigate } from "react-router-dom";

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
  },
  {
    path: "/",
    element: <Navigate to="/about" />,
  },
];
4.2 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, useRoutes } from "react-router-dom";
import routes from "./routes";

export default function App() {
  //根据路由表生成对应的路由规则
  const element = useRoutes(routes);
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">
              About
            </NavLink>
            <NavLink className="list-group-item" to="/home">
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

5. 嵌套路由

请添加图片描述

5.1 Home.jsx
/* src/pages/Home.jsx */
import React from "react";
import { NavLink, Outlet } from "react-router-dom";

export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink className="list-group-item" to="news">
              News
            </NavLink>
          </li>
          <li>
            <NavLink className="list-group-item" to="message">
              Message
            </NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet />
      </div>
    </div>
  );
}
5.2 Message.jsx
/* src/pages/Message.jsx */
import React from "react";

export default function Message() {
  return (
    <div>
      <ul>
        <li>
          <a href="/message1">message001</a>&nbsp;&nbsp;
        </li>
        <li>
          <a href="/message2">message002</a>&nbsp;&nbsp;
        </li>
        <li>
          <a href="/message/3">message003</a>&nbsp;&nbsp;
        </li>
      </ul>
    </div>
  );
}
5.3 News.jsx
/* src/pages/News.jsx */
import React from "react";

export default function News() {
  return (
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  );
}
5.4 index.js
/* src/routes/index.js */
import About from "../pages/About";
import Home from "../pages/Home";
import Message from "../pages/Message";
import News from "../pages/News";
import { Navigate } from "react-router-dom";

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "news",
        element: <News />,
      },
      {
        path: "message",
        element: <Message />,
      },
    ],
  },
  {
    path: "/",
    element: <Navigate to="/about" />,
  },
];
5.5 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, useRoutes } from "react-router-dom";
import routes from "./routes";

export default function App() {
  //根据路由表生成对应的路由规则
  const element = useRoutes(routes);
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">
              About
            </NavLink>
            <NavLink className="list-group-item" to="/home">
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
柠檬小帽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React 路由详解(超详细详解)
chen4565的博客
07-30 1万+
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
React缓存(获取历史路由/堆栈)
Ricale的博客
02-24 2322
判断上一个页面的路由是不是详情页的路由，然后提前把页面的查询条件存储起来，如果进入这个页面时候的上个路由时详情页的，那就拿到存储起来的条件去渲染页面，达到一个缓存的效果。
超详细的React路由基础使用
暗武逢天的博客
05-24 2775
一个路由就是一个映射关系(key:value) key为路径, value可能是function或component
React学习之相关堆栈调解器的实现（三十七）
qq_18661257的专栏
04-06 1487
这一部分讲述的是堆栈调解器的实现React的API可以被分为三部分，核心，渲染器，调解器，如果你对代码库可能有点不了解的话，可以看我的博客其中堆栈调解器是React产品中最重要的部分，被React DOM和React Native渲染器共同使用，它的代码地址src/renderers/shared/stack/reconciler。1.从零开始构建React的历史Paul O'Shannessy给予
React路由基本用法
u012475786的专栏
01-28 9255
React路由基本用法 1.React Router4.0基本概述： React Router4.0（以下简称 RR4）遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（声明式编程简单来讲就是你只需要关心做什么，而无需关心如何去做，可组合性的特点。 RR4 采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有...
React 全栈体系（一）
柠檬小帽的博客 - 计算机全栈体系
08-11 2168
React 入门
React 全栈体系（五）
柠檬小帽的博客 - 计算机全栈体系
09-13 603
React 应用（一）
React 全栈体系（十六）
柠檬小帽的博客 - 计算机全栈体系
09-26 1156
React 扩展（二）
React 全栈体系（九）
柠檬小帽的博客 - 计算机全栈体系
09-20 415
React 路由（一）
基于 koa+react+mysql 的全栈项目开发
06-10
本项目“基于 koa+react+mysql 的全栈项目开发”就是一个很好的例子，它结合了JavaScript的Node.js框架Koa、前端库React以及关系型数据库MySQL，构建了一个完整的Web应用体系。下面我们将详细探讨这三个关键技术及其...
FOT全栈工程师.docx
08-11
FOT公司正在招聘一位全栈工程师，特别强调了对于React JS, React Native和TypeScript的熟练掌握，同时也提及了NodeJS的相关技能。这份远程工作的核心在于利用技术实现高效虚拟团队协作。以下是对这个职位的详细解析...
全栈公开课教程
01-01
在这个“全栈公开课教程”中，你将有机会学习到一套完整的全栈开发知识体系，包括前端技术、后端架构、大数据处理以及网络爬虫的实践技巧。 首先，前端技术是用户与应用交互的桥梁，主要涉及HTML、CSS和JavaScript...
react全家桶资料.zip
03-30
React全栈开发，通常被称为"React全家桶"，是指使用React.js库以及与其相关的各种工具和技术，构建完整的前端应用的体系。React作为一个流行的JavaScript库，主要用于构建用户界面，特别是单页应用程序（SPA）。本...
后端 （Java Golang）全栈知识架构体系总结.zip
03-03
本资源“后端（Java Golang）全栈知识架构体系总结.zip”聚焦于两种广泛使用的后端编程语言——Java和Golang，提供了一个全面的学习路径，帮助开发者构建全栈技能。 首先，让我们关注Java。Java是一种面向对象的、...
React学习笔记02-----React基本使用
m0_67357141的博客
07-14 387
想实现页面的，而不是整个网页的刷新。AJAX+DOM可以实现局部刷新。
前端效果ᅳ1、react实现时间上下轮播特效
ChenJin_2的博客
07-16 224
前端效果ᅳ1、react实现时间上下轮播特效
Next.js 和 React的区别
最新发布
07-16 340
Next.js 和 React 渲染方式、功能特点及应用场景等方面的差异。
图片上传裁剪react-cropper
xiao970615的博客
07-11 360
【代码】图片上传裁剪react-cropper。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬小帽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值