React 全栈体系（十）

news/2024/12/29 4:52:49/

第五章 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.ppmy.cn/news/1117921.html

相关文章

ros2与web通信实例

ros2与web通信实例

ros2与web通信实例 最近需要进行ros2与web端进行通信操作&#xff0c;目标是ros2发送的消息web端能够显示在界面&#xff0c;并且前端能够发布数据&#xff0c;最终实例如下&#xff1a; 然而网上查的的资料如古月居的&#xff1a; 利用Websocket实现ROS与Web的交互 https:/…
阅读更多...
用 Python实现Python解释器

用 Python实现Python解释器

介绍 Byterun 是一个用 Python 实现的 Python 解释器。随着我对 Byterun 的开发&#xff0c;我惊喜地的发现&#xff0c;这个 Python 解释器的基础结构用 500 行代码就能实现。在这一章我们会搞清楚这个解释器的结构&#xff0c;给你足够探索下去的背景知识。我们的目标不是向…
阅读更多...
项目基本搭建流程

项目基本搭建流程

项目创立&#xff1a;webapp 设置maven 的和settings.xml 的地址 手动建立java文件夹和resource文件夹 一.分层 二.使用generator 来自动建立实体类dao 和dao接口,存放sql文件的xml&#xff1b;并复制到项目中&#xff08;路径可能可以直接设置&#xff09; 三. 配置文件&…
阅读更多...
python读取.xls文件，绘制钻头外径磨损图

python读取.xls文件，绘制钻头外径磨损图

通过xlrd模块读取.xls文件&#xff0c;数据如下&#xff0c;总计162行16列&#xff1a; 读取与作图如下&#xff1a; from xlrd import open_workbook import matplotlib import matplotlib.pyplot as plt # 设置字体为微软雅黑&#xff0c;解决中文显示问题matplotlib.rc(&qu…
阅读更多...
python统计秒数

python统计秒数

code 1.没有cuda的版本 import times time.time() for i in range(100):pass t time.time() print("time:{} sec".format(t-s))2.cuda 同步 torch.cuda.synchronize() start time.time() result model(input) torch.cuda.synchronize() end time.time()ref …
阅读更多...
HUAWEI华为荣耀猎人游戏本V700 i7独显2060(FRD-WFD9)原装出厂Windows10系统工厂模式(含F10还原)

HUAWEI华为荣耀猎人游戏本V700 i7独显2060(FRD-WFD9)原装出厂Windows10系统工厂模式(含F10还原)

华为HONOR荣耀笔记本原厂系统镜像包&#xff0c;安装恢复时自动创建F10一键智能还原功能 链接&#xff1a;https://pan.baidu.com/s/1_px_3Fr9qEE6jExz1eKKKg?pwdk6uc 提取码&#xff1a;k6uc 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、华为电脑管家等预装程序…
阅读更多...
Linux学习资源Index

Linux学习资源Index

由于Linux是支撑“云计算”的最核心、最底层、最重要的技术&#xff0c;持续提升自已的Linux水平是必须的&#xff0c;这里将不断更新的Linux学习索引。 书籍 书籍首页 - Documentation (rockylinux.org) WWW链接 提定发行版 RockyLinux Rocky Linux Download Rocky | R…
阅读更多...
【系统架构】系统质量属性与架构评估

【系统架构】系统质量属性与架构评估

导读&#xff1a;本文整理关于系统质量属性与架构评估来构建系统架构知识体系。完整和扎实的系统架构知识体系是作为架构设计的理论支撑&#xff0c;基于大量项目实践经验基础上&#xff0c;不断加深理论体系的理解&#xff0c;从而能够创造新解决系统相关问题。 目录 1、软件…
阅读更多...
最新文章

Copyright @ 2022~2023