React 全栈体系（十）

2023-09-20 21:52:55

第五章 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.路由的匹配是按照注册路由的顺序进行的
更多推荐

深度分析Oracle中的NULL

【squids.cn】全网zui低价RDS，免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等关键点特殊值NULL意味着没有数据，它声明了该值是未知的事实。默认情况下，任何类型的列和变量都可以取这个值，除非它们有一个NOTNULL约束。此外，数据库管理系统会自动向包含在表的主键中的列添加NOT

七、【漏洞复现】YApi接口管理平台远程代码执行漏洞

七、【漏洞复现】YApi接口管理平台远程代码执行漏洞7.1、漏洞原理若YApi对外开放注册功能，攻击者可在注册并登录后，通过构造特殊的请求执行任意代码，接管服务器。7.2、影响版本YApi<=V1.92All7.3、指纹识别1.有注册登陆主页2.使用指纹识别类平台识别。7.4、漏洞复现1.注册账号2.新建项目-名称随意

uniapp引入小程序原生插件

怎么在uniapp中使用微信小程序原生插件，以收钱吧支付插件为例1、在manifest.json里的mp-weixin中增加插件配置"mp-weixin":{"appid":"你的小程序appid","setting":{"urlCheck":false},"usingComponents":true,//在下面配置插

1.9python基础语法——运算符

1）算数运算符运算符描述实例+加1+1输出结果为2-减1-1输出结果为0*乘2*2输出结果为4/除10/2输出结果为5//整除9//4输出结果为2%取余9%4输出结果为1**指数2***4输出结果为16，即2*222()小括号小括号用来提高运算优先级，即(1+2)*3输出结果为9注意：混合运算优先级顺序：()高于**高

Laravel5使用box/spout扩展，大文件导出CSV文件

一、背景早期开发的系统，使用laravel框架，版本V5.4，项目经理导出3年的数据，由于数据量较大，浏览器卡死。一次性无法导出，某位程序员告知按月去导出，之后在拼凑，这。。搁谁受的了，我担心投诉，加个班优化下。二、优化方案导出数据的Sql，对应创建索引，提高查询速度查询结果集使用chunk()方法拆分较小集合使用bo

Hive 的权限管理

目录​编辑一、Hive权限简介1.1hive中的用户与组1.1.1用户1.1.2组1.1.3角色1.2使用场景1.2.1hivecli1.2.2hiveserver21.2.3hcatalogapi1.3权限模型1.3.1StorageBasedAuthorizationintheMetastoreServer1.3.

竞赛选题 基于机器视觉的火车票识别系统

文章目录0前言1课题意义课题难点：2实现方法2.1图像预处理2.2字符分割2.3字符识别部分实现代码3实现效果最后0前言🔥优质竞赛项目系列，今天要分享的是基于机器视觉的火车票识别系统该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！🧿更多资料,项目分享：https://gitee.com/dancheng-sen

MySQL数据库查缺补漏——基础篇

MySQL数据库查缺补漏-基础篇基础篇netstartmysql80[服务名]netstopmysql80createdatabasepshdhxdefaultcharsetutf8mb4;为什么不使用utf8？因为其字符占用三个字节，有四个字节的字符，所有需要设置为utf8mb4;数值类型：字符串类型：日期类型：用户

汽车自适应巡航系统车距控制策略研究

摘要:由于汽车自适应巡航控制系统的非线性和不确定性等问题，传统的非线性系统等效线性化方法难以满足系统的精度、稳定度和快速性的要求，因此提出了一种基于模糊控制理论的自适应巡航控制器的设计方法。通过对汽车距离差和相对速度的计算和推理，实时调整本车加速度，保证本车能够在一定的安全车距下跟随前车。通过在Matlab/Simul

虹科案例 | LIN/CAN总线汽车零部件测试方案

文章来源：虹科汽车电子点此阅读原文虹科的LIN/CAN总线汽车零部件测试方案是一款优秀的集成套装，基于Baby-LIN系列产品，帮助客户高效完成在测试、生产阶段车辆零部件质量、功能、控制等方面的检测工作。1、汽车零部件测试的重要性？汽车零部件的测试对于确保汽车的安全性、功能性和可靠性起着至关重要的作用。LIN/CAN通

驱动开发DAY4

驱动代码#include<linux/init.h>#include<linux/module.h>#include<linux/cdev.h>#include<linux/fs.h>#include<linux/device.h>#include<linux/uaccess.h>#include<linux/slab

热文推荐
  1. 1334. 阈值距离内邻居最少的城市

    1334.阈值距离内邻居最少的城市原题链接：完成情况：解题思路：参考代码：DijkstraDijkstra_小顶堆Floyd_martix方法原题链接：1334.阈值距离内邻居最少的城市https://leetcode.cn/problems/find-the-city-with-the-smallest-number

  2. HDMI 直通 ILA 调试实验

    FPGA教程学习第十四章HDMI直通ILA调试实验文章目录FPGA教程学习前言实验原理程序设计实验过程实验尝试总结TODO前言HDMI输入直通到HDMI输出的显示，完成一个简单的HDMI输入输出检测。实验原理开发板HDMI输出接口芯片使用ADV7511，HDMI输入芯片采用ADV761，可以把输入的数据通过输出直接发送

  3. 【C语言】结构

    结构类型声明结构变量structdata{//结构成员intmonth;intday;intyear;};//或structpoint{intx;inty;}p1,p2;//只定义了两个变量struct{inta;intb;}s1,s2;定义结构变量structdatatoday;//定义一个变量today,里面有mo

  4. Redis-带你深入学习数据类型zset

    目录1、zset有序集合2、zset相关命令2.1、添加或更新指定的元素——zadd2.2、获取有序集合zset的元素个数相关命令：zcard、zcount2.3、返回指定区间元素相关命令：zrange、arevrange、zrangebyscore2.4、删除相关命令：zpopmax、zpopmin、bzpopmax

  5. UI设计需要学会哪些软件?优漫动游

    想要学习UI设计，那么就要先学会UI设计软件，这是基础知识，学会软件后，你会发现软件以外的真正UI设计的能力，软件仅仅只是一个工具。今天这篇文章就是给予初学者正确的UI设计观念，详细的了解一下UI设计需要学会哪些软件?UI设计需要学会哪些软件?UI设计需要学会哪些软件?UI是“用户界面”的意思，UI设计涉及到的领域有：

  6. 构建自动化测试环境：使用Docker和Selenium！

    随着软件开发的日益复杂和迭代速度的加快，自动化测试被越来越广泛地应用于软件开发流程中。它能够提高测试效率、减少测试成本，并保证软件质量的稳定性。在构建自动化测试环境方面，Docker和Selenium是两个非常有用的工具。下面将介绍如何使用Docker和Selenium构建自动化测试环境。一、Docker简介Docke

  7. 电商业务--技术负责人 250K*15

    职位描述研发团队管理系统搭建技术管理系统架构岗位职责负责/参与到中大型负责系统的整体架构和设计；根据业务特点和行业最佳实践，设计符合多个市场物流业务需求，且具备可扩展能力的系统架构和业务架构承担团队稳定性建设工作，包括物流全球多机房调度、稳定性治理、资损防控、容灾降级等深入理解业务，强技术驱动，能够深入挖掘业务痛点，调

  8. 2023-9

    内核向应用层发送netlink单播消息：nlmsg_unicast->netlink_unicast->netlink_sendskb->__netlink_sendskb->把skb链入structsock的sk_receive_queue链表中，再调用sk->sk_data_ready(sk);->sock_def

  9. JavaScript 的面向对象基础，设计模式中的原型模式（设计模式与开发实践 P2）

    文章目录1.1动态类型语言和鸭子类型1.2多态1.3封装封装数据封装实现封装类型1.4原型模式和基于原型继承的JavaScript对象系统C#原型模式JS原型模式在学习JS设计模式之前需要了解一些设计模式基础，如果不是JavaScript用户可以直接跳到设计模式篇的讲解～1.1动态类型语言和鸭子类型编程语言按照数据类型