React(8)

千锋学习视频https://www.bilibili.com/video/BV1dP4y1c7qd?p=72&spm_id_from=pageDriver&vd_source=f07a5c4baae42e64ab4bebdd9f3cd1b3

1.React 路由

1.1 什么是路由?

        路由是根据不同的 url 地址展示不同的内容或页面。 

        一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。

1.2 路由安装

npm i react-router-dom@5

1.3 路由使用

import React, { Component } from 'react'
import {HashRouter,Route} from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class componentName extends Component {render() {return (<div><HashRouter>  <Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route></HashRouter> </div>)}
}

  <HashRouter> 会让路径带上一个/#

也可以把路由封装成一个组件抽离出去


import React, { Component } from 'react'import MyRouter from './MyRouter'
// import Film from './views/Film'
// import Cinemas from './views/Cinemas'
// import Center from './views/Center'export default class componentName extends Component {render() {return (<div>{/* <HashRouter>  也可以把路由封装成一个组件抽离出去<Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route></HashRouter> */}<MyRouter></MyRouter></div>)}
}


import React, { Component } from 'react'
import {HashRouter,Route} from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class MyRouter extends Component {render() {return (<div><HashRouter>  <Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route></HashRouter></div>)}
}

1.4 路由重定向

如果没有匹配的路径,需要跳转到指定的路径  使用<Redirect  from=""  to="" />


import React, { Component } from 'react'
import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class MyRouter extends Component {render() {return (<div><HashRouter>  <Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route>{/* 匹配/路径的时候 模糊匹配  跳转到/films */}<Redirect from="/" to="/films"></Redirect></HashRouter></div>)}
}

 但是这个做法存在问题:当输入http://localhost:3000/#/center 会跳到center 但再次刷新又会跳到/films 

改进:使用Switch   匹配一次后将不再继续匹配


import React, { Component } from 'react'
import { HashRouter, Route, Redirect, Switch } from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'export default class MyRouter extends Component {render() {return (<div><HashRouter><Switch><Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route>{/* 匹配/路径的时候  跳转到/films */}<Redirect from="/" to="/films"></Redirect></Switch></HashRouter></div>)}
}

精准匹配exact

场景:/ 跳转到/films  其他不匹配上述路由的跳转到404


import React, { Component } from 'react'
import { HashRouter, Route, Redirect, Switch } from 'react-router-dom'
import Film from './views/Film'
import Cinemas from './views/Cinemas'
import Center from './views/Center'
import NotFound from './views/NotFound'export default class MyRouter extends Component {render() {return (<div><HashRouter><Switch><Route path="/films" component={Film}></Route><Route path="/cinemas" component={Cinemas}></Route><Route path="/Center" component={Center}></Route>{/* 匹配/路径的时候  跳转到/films */}<Redirect from="/" to="/films" exact></Redirect><Route component={NotFound}></Route></Switch></HashRouter></div>)}
}

import React, { Component } from 'react'export default class NotFound extends Component {render() {return (<div>404 Not Found</div>)}
}

注意:exact 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套Switch 来用)

1.5 嵌套路由

MyRouter组件中的路由保持不变   当/film模糊匹配到后会进入Film组件

以下代码在Film组件中写即可

<Switch><Route path="/films/nowplaying" component={Nowplaying}/><Route path="/films/comingsoon" component={Comingsoon}/><Redirect from="/films" to="/films/nowplaying"/>
</Switch>

1.6 路由跳转方式

1.声明式导航

 

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'export default class Navbar extends Component {render() {return (<div><li><NavLink to="/films">电影</NavLink></li><li><NavLink to="/cinemas">影院</NavLink></li><li><NavLink to="/center">我的</NavLink></li></div>)}
}

意思是可以监听到地址  如果是/center会给我的这个a标签给加上class="active"的属性,

也可以自定义属性,方便设置css高亮显示

  <li><NavLink to="/films" activeClassName="Navbaractive">电影</NavLink></li><li><NavLink to="/cinemas" activeClassName="Navbaractive">影院</NavLink></li><li><NavLink to="/center" activeClassName="Navbaractive">我的</NavLink></li>

2.编程式导航

this.props.history.push(`/center`)

或者导入useHistory

import {useHistory} from 'react-router-dom'const history =useHistory()history.push(`/detail`)

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

优化广告运营,代理IP的作用不容忽视

在当今激烈的市场竞争中&#xff0c;广告投放早已成为企业营销的重要手段。广告投放不仅可以提高品牌知名度、产品可信度&#xff0c;还能够树立品牌形象&#xff0c;增强市场竞争力。然而&#xff0c;影响广告投放效果的因素很多&#xff0c;投放时间段、投放地区、在哪个平台…

iTwinCapture中文版原ContextCapture安装包以及安装教程

iTwinCapture软件安装教程 一、获取软件 中文安装包评论区或后台回复iTwinCapture 在App Store或Google Play搜索软件名称"iTwin Capture",下载安装软件。 您也可以在Bentley官网下载对应的iTwin Capture版本。 二、软件安装 点击下载后的安装包,根据提示完成安装…

环二肽16364-35-5,cyclo(Glu-Gly),环(甘氨酰-谷氨酸),产品特点介绍

中文名&#xff1a;环&#xff08;甘氨酰-谷氨酸&#xff09; 英文名&#xff1a;cyclo(Glu-Gly) CYCLO(-GLY-GLU) CAS&#xff1a;16364-35-5 分子式&#xff1a;C7H10N2O4 分子量&#xff1a;186.165 沸点&#xff1a; 666.840.0 C(Predicted) 表面张力&#xff08;dy…

【IMX6ULL驱动开发学习】08.马达驱动实战:驱动编写、手动注册平台设备和设备树添加节点信息

目录 一、使用设备树 1.1 修改设备树流程 二、手动创建平台设备 三、总结&#xff08;附驱动程序&#xff09; 前情提要&#xff1a;​​​​​​​【IMX6ULL驱动开发学习】07.驱动程序分离的思想之平台总线设备驱动模型和设备树_阿龙还在写代码的博客-CSDN博客 手动注册…

前端界面设计

目录 1.兴趣展示网站1.效果2.核心代码展示3.源代码 2.优美的登录网页1.效果2.核心代码展示3.源代码 3.美女相册1.效果2.核心代码展示3.源代码 4.精美选项卡1.效果2.核心代码展示3.源代码 4. 自己写过的一些前端界面设计Demo整理。 1.兴趣展示网站 1.效果 2.核心代码展示 工程截…

【中危】 Apache NiFi 连接 URL 验证绕过漏洞 (CVE-2023-40037)

漏洞描述 Apache NiFi 是一个开源的数据流处理和自动化工具。 在受影响版本中&#xff0c;由于多个Processors和Controller Services在配置JDBC和JNDI JMS连接时对URL参数过滤不完全。使用startsWith方法过滤用户输入URL&#xff0c;导致过滤可以被绕过。攻击者可以通过构造特…

C++头文件和std命名空间

C 是在C语言的基础上开发的&#xff0c;早期的 C 还不完善&#xff0c;不支持命名空间&#xff0c;没有自己的编译器&#xff0c;而是将 C 代码翻译成C代码&#xff0c;再通过C编译器完成编译。 这个时候的 C 仍然在使用C语言的库&#xff0c;stdio.h、stdlib.h、string.h 等头…

探索Vue生命周期钩子函数:从创生到销毁

Vue这个引领前端开发潮流的框架&#xff0c;其优雅的响应式数据绑定和组件式开发方式&#xff0c;使得它备受瞩目。然而&#xff0c;Vue的魅力绝不仅限于此&#xff0c;它还赋予开发者一组神奇的生命周期钩子函数&#xff0c;能够在组件的各个成长阶段插入自定义代码。本文将带…

IPv6 基础概念

IPv6 基础概念 组播地址 IPv6的组播与IPv4相同&#xff0c;用来标识一组接口&#xff0c;一般这些接口属于不同的节点。一个节点可能属于0到多个组播组。发往组播地址的报文被组播地址标识的所有接口接收。例如组播地址FF02::1表示链路本地范围的所有节点&#xff0c;组播地址…

二、Kafka快速入门

目录 2.1 安装部署1、【单机部署】2、【集群部署】 2.2 Kafka命令行操作1、查看topic相关命令参数2、查看当前kafka服务器中的所有Topic3、创建 first topic4、查看 first 主题的详情5、修改分区数&#xff08;注意&#xff1a;分区数只能增加&#xff0c;不能减少&#xff09;…

Red Hat Enterprise Linux (RHEL) 6.4 安装、redhat6.4安装

1、下载地址 Red Hat Enterprise Linux (RHEL) 6.4 DVD ISO 迅雷下载地址http://rhel.ieesee.net/uingei/rhel-server-6.4-x86_64-dvd.iso 2、创建虚拟机 3、redhat安装 选择第一个安装 Skip跳过检查 语言选择简体中文 键盘选择默认 选择基本存储设备 忽略所有数据 设置root密…

Verilog 入门

Verilog 入门 本内容来自 牛客网Verilog入门特别版 1、一个没有输入和一个输出常数1的输出的电路&#xff0c;输出信号为one module top_module(one);output wire one;assign one 1b1; endmodule2、创建一个具有一个输入和一个输出的模块&#xff0c;其行为类似于电路上的连…

Office ---- excel ---- 怎么批量设置行高

解决方法&#xff1a; 调整行高即可

在 IDEA 中使用 Git开发 图文教程

在 IDEA 中使用 Git开发 图文教程 一、连接远程仓库二、IDEA利用Git进行开发操作三、分支操作3.1 新建分支3.2 切换分支3.3 删除分支3.4 比较分支3.5 合并分支 四、常用快捷键 一、连接远程仓库 一、打开IDEA&#xff0c;进入目录&#xff1a;File ->New ->Project from…

十问华为云 Toolkit:开发插件如何提升云上开发效能

众所周知&#xff0c;桌面集成开发环境&#xff08;IDE&#xff09;已经融入到开发的各个环节&#xff0c;对开发者的重要性和广泛度是不言而喻的&#xff0c;而开发插件更是建立在IDE基础上的功能Buff。 Huawei Cloud ToolKit作为华为云围绕其产品能力向开发者桌面上的延伸&a…

数据结构——栈和队列

栈和队列的建立 前言一、栈1.栈的概念2.栈的实现3.代码示例&#xff08;1&#xff09;Stack.h&#xff08;2&#xff09;Stack.c&#xff08;3&#xff09;Test.c&#xff08;4&#xff09;运行结果&#xff08;5&#xff09;完整代码演示 二、队列1.队列的概念2.队列的实现3.代…

ChatGPT应用于高职教育的四大潜在风险

目前&#xff0c;ChatGPT还是一种仍未成熟的技术&#xff0c;当其介入高职教育生态后&#xff0c;高职院校师生在享受ChatGPT带来的便利的同时&#xff0c;也应该明白ChatGPT引发的风险也会随之进入高职教育领域&#xff0c;如存在知识信息、伦理意识与学生主体方面的风险与挑战…

DSO 系列文章(3)——DSO后端正规方程构造与Schur消元

文章目录 DSO代码注释&#xff1a;https://github.com/Cc19245/DSO-CC_Comments

【音视频】奇怪问题记录-执法仪引起的问题

现象 打开&#xff0c;关闭&#xff0c;再打开&#xff0c;反复这样操作&#xff0c;几次后&#xff0c;可能 出现&#xff08;1&#xff09;拉不出来&#xff08;2&#xff09;绿色的屏 &#xff08;3&#xff09;黑色的屏&#xff08;如上&#xff09;。 &#xff08;4&am…

五种消息模型简单说明

五种消息模型简单说明 RabbitMQ提供了6种消息模型&#xff0c;但是第6种其实是RPC&#xff0c;并不是MQ&#xff0c;因此不予学习。那么也就剩下5种。但是其实3、4、5这三种都属于订阅模型&#xff0c;只不过进行路由的方式不同。  我们通过一个demo工程来了解下RabbitMQ的…