React 全栈体系（十）

news2024/9/25 17:11:28

第五章 React 路由

三、基本路由使用

7. 代码 - Switch 的使用

7.1 Test
/* src/pages/Test/index.jsx */
import React, { Component } from 'react'

export default class Test extends Component {
	render() {
		return (
			<div>
				<h2>Test....</h2>
			</div>
		)
	}
}
7.2 App
/* src/App.jsx */
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./pages/Home"; //Home是路由组件
import About from "./pages/About"; //About是路由组件
import Test from "./pages/Test";
import Header from "./components/Header"; //Header是一般组件
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
                  <Route path="/home" component={Test} />
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

请添加图片描述

7.3 总结
1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。

8. 代码 - 解决样式丢失问题

8.1 index
<!-- public/index.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>React App</title>
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<link rel="stylesheet" href="/css/bootstrap.css">
		<style>
			.alex{
				background-color: rgb(209, 137, 4) !important;
				color: white !important;
			}
		</style>
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>
8.2 App
/* src/App.jsx */
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./pages/Home"; //Home是路由组件
import About from "./pages/About"; //About是路由组件
import Header from "./components/Header"; //Header是一般组件
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to="/alex/about">About</MyNavLink>
              <MyNavLink to="/alex/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Switch>
                  <Route path="/alex/about" component={About} />
                  <Route path="/alex/home" component={Home} />
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
8.3 总结
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter

9. 代码 - 路由的模糊匹配与严格匹配

9.1 App
/* src/App.jsx */
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./pages/Home"; //Home是路由组件
import About from "./pages/About"; //About是路由组件
import Header from "./components/Header"; //Header是一般组件
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Switch>
                  <Route exact path="/about" component={About} />
                  <Route exact path="/home" component={Home} />
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
9.2 总结
1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

10. 代码 - Redirect 的使用

10.1 App
/* src/App.jsx */
import React, { Component } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Home from "./pages/Home"; //Home是路由组件
import About from "./pages/About"; //About是路由组件
import Header from "./components/Header"; //Header是一般组件
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
                  <Redirect to="/about" />
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

请添加图片描述

10.2 总结
1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：
	<Switch>
		<Route path="/about" component={About}/>
		<Route path="/home" component={Home}/>
		<Redirect to="/about"/>
	</Switch>

四、嵌套路由使用

1. 效果

请添加图片描述

2. 代码

请添加图片描述

2.1 News
/* src/pages/Home/News/index.jsx */
import React, { Component } from "react";

export default class News extends Component {
  render() {
    return (
      <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
      </ul>
    );
  }
}
2.2 Message
/* src/pages/Home/Message/index.jsx */
import React, { Component } from "react";

export default class Message extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <a href="/message1">message001</a>&nbsp;&nbsp;
          </li>
          <li>
            <a href="/message2">message002</a>&nbsp;&nbsp;
          </li>
          <li>
            <a href="/message3">message003</a>&nbsp;&nbsp;
          </li>
        </ul>
      </div>
    );
  }
}
2.3 Home
/* src/pages/Home/index.jsx */
import React, { Component } from "react";
import MyNavLink from "../../components/MyNavLink";
import { Route, Switch, Redirect } from "react-router-dom";
import News from "./News";
import Message from "./Message";

export default class index extends Component {
  render() {
    return (
      <div>
        <h3>我是Home的内容</h3>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to="/home/news">News</MyNavLink>
            </li>
            <li>
              <MyNavLink to="/home/message">Message</MyNavLink>
            </li>
          </ul>
          {/* 注册路由 */}
          <Switch>
            <Route path="/home/news" component={News} />
            <Route path="/home/message" component={Message} />
            <Redirect to="/home/news" />
          </Switch>
        </div>
      </div>
    );
  }
}

3. 总结

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1026700.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

拓世AI|轻松涨粉的秘密武器！从选题到配图，AI工具让你事半功倍

拓世AI|轻松涨粉的秘密武器！从选题到配图，AI工具让你事半功倍

2023年的小红书&#xff0c;发展趋势依旧昂扬向上。 最新数据显示&#xff0c;小红书拥有逾3亿的月活用户,且超过80%的用户集中在20-30岁年龄段。这代表什么?广大的年轻用户基数和消费能力!正处于购买力上升期的年轻人,是品牌最想抓住的目标用户。巨大的红利吸引了无数人下场…
阅读更多...
自定义开发成绩查询小程序

自定义开发成绩查询小程序

在当今数字化时代&#xff0c;教育行业借助技术手段提高教学效果。作为老师&#xff0c;拥有一个自己的成绩查询系统可以帮助你更好地管理学生成绩&#xff0c;并提供更及时的反馈。本文将为你详细介绍如何从零开始搭建一个成绩查询系统&#xff0c;让你的教学工作更加高效和便…
阅读更多...
MQ - 10 RocketMQ的架构设计与实现

MQ - 10 RocketMQ的架构设计与实现

文章目录 导图概述RocketMQ 系统架构协议和网络模块数据存储元数据存储消息数据生产者和消费者生产端消费端HTTP 协议支持和管控操作RocketMQ 从生产到消费的全过程总结导图 概述 RocketMQ 在功能、稳定性、性能层面都比 RabbitMQ 的表现更好 RocketMQ 系统架构 先来看一下 R…
阅读更多...
驱动开发练习，platform驱动模型的使用

驱动开发练习，platform驱动模型的使用

一.总线模型介绍 linux中将一个挂载在总线上的驱动的驱动模型分为三部分&#xff1a;device、driver和bus&#xff1b; device部分&#xff1a;用来保存设备信息对象&#xff0c;在内核中一个klist_device链表中进行管理&#xff1b; driver部分&#xff1a;用来保存驱动信息对…
阅读更多...
Windows：虚拟内存的使用

Windows：虚拟内存的使用

文章目录 简介如何开启并设置虚拟内存如何查看虚拟内存参考文献 简介 windows里什么是虚拟内存&#xff1f; 其实类似Linux里的交换内存/交换页&#xff0c;即将硬盘上一块空间作为虚拟的内存&#xff0c;当物理内存不足时&#xff0c;则可以将不常用的数据从物理内存中转移到…
阅读更多...
如何做到人声和背景音乐分离？记住这个宝藏网站～

如何做到人声和背景音乐分离？记住这个宝藏网站～

在这个短视频盛行的时代&#xff0c;优质的背景音乐会让视频锦上添花&#xff0c;但也会造成类似的问题&#xff1a;想单独使用视频中的某一段人声&#xff0c;但会被背景音乐扰乱视听效果。这时就需要将人声和背景音乐进行分离了&#xff0c;下面来分享一个宝藏网站&#xff0…
阅读更多...
CodeArts Check代码检查服务用户声音反馈集锦（5）

CodeArts Check代码检查服务用户声音反馈集锦（5）

作者&#xff1a;gentle_zhou 原文链接&#xff1a;CodeArts Check代码检查服务用户声音反馈集锦&#xff08;5&#xff09;-云社区-华为云 CodeArts Check&#xff08;原CodeCheck&#xff09;&#xff0c;是自主研发的代码检查服务。建立在华为30年自动化源代码静态检查技术…
阅读更多...
抖音seo矩阵系统源码分享-技术梳理

抖音seo矩阵系统源码分享-技术梳理

抖音seo源码&#xff0c;抖音seo矩阵系统源码技术搭建&#xff0c;抖音seo源码技术开发思路梳理搭建 抖音账号矩阵系统部分源代码分享 if (empty($video_item)) {$this->displayJsonError(参数错误);}$curr_platform json_decode($video_item[dv_platform], 1);$curr_plat…
阅读更多...
StarRocks 社区：从初生到两周年的进化之路

StarRocks 社区：从初生到两周年的进化之路

2021 年 9 月 8 日&#xff0c;StarRocks 开源社区诞生。从第一天开始&#xff0c;我们怀揣着“打造世界一流的数据分析产品”的梦想&#xff0c;踏上了星辰大海的征途。 两年间&#xff0c;StarRocks 在 GitHub 上收获了 5.4K Stars&#xff0c;产品共迭代发布了 90 余个版本&…
阅读更多...
数字化营销到底是什么？与传统营销有什么区别？

数字化营销到底是什么？与传统营销有什么区别？

一、什么是数字化营销&#xff1f; 数字化 将许多复杂的、难以估计的信息通过一定的方式变成计算机能处理的0和1的二进制码&#xff0c;形成计算机里的数字孪生。物理世界被重构&#xff0c;被一一搬到数字化世界当中。 数字化营销 就是数字化的传播渠道去推广企业的产品&am…
阅读更多...
GLTF编辑器如何快速重置模型原点

GLTF编辑器如何快速重置模型原点

1、什么是模型原点&#xff1f; 模型原点是三维建模中的概念&#xff0c;它是指在一个虚拟三维空间中确定的参考点。模型原点通常位于模型的几何中心或基本组件的中心位置。如图所示&#xff1a; 可以看到模型的原点在模型的几何中心 2、模型原点的作用 知道了什么是模型原点&…
阅读更多...
【Linux】Ubuntu美化主题【教程】

【Linux】Ubuntu美化主题【教程】

【Linux】Ubuntu美化主题【教程】 文章目录 【Linux】Ubuntu美化主题【教程】1. 安装优化工具Tweak2.下载自己喜欢的主题3. 下载自己喜欢的iconReference 1. 安装优化工具Tweak 首先安装优化工具Tweak sudo apt-get install gnome-tweak-tool安装完毕后在菜单中打开Tweak 然后…
阅读更多...
spring的ThreadPoolTaskExecutor装饰器传递调用线程信息给线程池中的线程

spring的ThreadPoolTaskExecutor装饰器传递调用线程信息给线程池中的线程

概述 需求是想在线程池执行任务的时候&#xff0c;在开始前将调用线程的信息传到子线程中&#xff0c;在子线程完成后&#xff0c;再清除传入的数据。 下面使用了spring的ThreadPoolTaskExecutor来实现这个需求. ThreadPoolTaskExecutor 在jdk中使用的是ThreadPoolExecutor…
阅读更多...
跨境电商运营的新趋势：自养号测评补单技术解析

跨境电商运营的新趋势：自养号测评补单技术解析

当前阶段&#xff0c;亚马逊、速卖通、虾皮、lazada等主流跨境电商平台的主要推广方式仍然是广告投放&#xff0c;毕竟这是平台的主要收入来源之一。然而&#xff0c;随着越来越多的卖家进军跨境市场&#xff0c;市场竞争日趋激烈&#xff0c;传统的广告投入效果逐渐减弱。在这…
阅读更多...
泡泡玛特大火，潮玩行业如何利用软文推广出圈

泡泡玛特大火，潮玩行业如何利用软文推广出圈

随着经济的发展&#xff0c;各类潮玩创意落地、新产品层出不穷&#xff0c;也导致潮玩行业陷入了类目繁多&#xff0c;但是新品很难出圈的困境。泡泡玛特作为年轻人中十分受欢迎的品牌&#xff0c;紧跟消费浪潮&#xff0c;成为国内营销赛道上一个让人无法忽视的潮玩IP。那么潮…
阅读更多...
12万汉语源流词典汉字记性ACCESS\EXCEL数据库

12万汉语源流词典汉字记性ACCESS\EXCEL数据库

《12万汉语源流词典汉字记性ACCESS数据库》在继承前人经验的基础上&#xff0c;注意吸收今人的研究成果&#xff0c;注重形音义的密切配合&#xff0c;尽可能历史地、正确地反映汉字形音义的发展。在字形方面&#xff0c;简要说明其结构的演变。语义解释遵循古今语义的发展变化…
阅读更多...
408-2012

408-2012

一、单项选择题&#xff08;2分/题&#xff09; 1.求整数 n&#xff08;n>0&#xff09;阶乘的算法如下其时间复杂度是______。 int fact(int n){if(n<1){return 1;}return n*fact(n-1); } A.O() B.O(n) C.O() D.O(n^2) 解答&#xff1a;B 2.已知操…
阅读更多...
PyTorch深度学习（五）【卷积神经网络】

PyTorch深度学习（五）【卷积神经网络】

卷积神经网络(基础篇)&#xff1a; 下采样&#xff08;Subsampling&#xff09;&#xff1a;通道数不变&#xff0c;减少数据量&#xff0c;降低运算需求。 做这个卷积&#xff1a; 网络&#xff1a; 最大池化层&#xff08;MaxPooling&#xff09;&#xff1a;通道数不变&…
阅读更多...
测试用例设计底层逻辑

测试用例设计底层逻辑

【软件测试行业现状】2023年了你还敢学软件测试&#xff1f;未来已寄..测试人该何去何从&#xff1f;【自动化测试、测试开发、性能测试】 测试用例是每位测试人员都绕不开的话题&#xff0c;也是大家习以为常的事情。几乎所有测试相关的公众号、博客、专栏&#xff0c;都会提及…
阅读更多...
openstack wallaby 对应 需要的python版本 3.8.18

openstack wallaby 对应 需要的python版本 3.8.18

Python 3.6 (default in CentOS 8.0) Python 3.8 (latest available; default in Ubuntu 20.04) Tested Runtimes for Wallaby — OpenStack Technical Committee Governance Documents x86_64 CentOS8.3.2011 python 3.6.8 安装报错 python3 -m pip install nova23.2.2 手…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023