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.mzph.cn/news/48867.shtml

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

相关文章

如何使用 Docker Compose 运行 OSS Wordle 克隆

了解如何使用 Docker Compose 在五分钟内运行您自己的流行 Wordle 克隆实例。您将如何部署 Wordle&#xff1f; Wordle在 2021 年底发布后席卷了互联网。对于许多人来说&#xff0c;这仍然是一种早晨的仪式&#xff0c;与一杯咖啡和一天的开始完美搭配。作为一名 DevOps 工程师…

SQL Server 执行报错: “minus“ 附近有语法错误。

sql server 执行带 minus 的语句一直报错&#xff0c;如下图&#xff1a; 找了好久才知道minus是Oracle里面的语法&#xff0c;SQL server 应用 EXCEPT。

存储IO路径:Linux下的“快递之旅”

相信大家都有过网购的经历,当我们在电商平台上浏览心仪的商品并下单时,快递小哥会负责将物品从商家手中送至我们手中。在这个过程中,快递小哥需要经过一系列的流程才能将物品准确送达。同样,在Linux系统中,当用户下发一笔读写操作时,这些数据也需要经过一系列的流程才能最…

【面试】项目经理面试题

文章目录 一、项目管理面试中通常会问到的问题1.项目管理软件工具知识2.做项目计划的技能3.人员管理技能4.沟通技巧5.方法论知识 二、问面试官的问题三. 面试系列推荐 一、项目管理面试中通常会问到的问题 1.项目管理软件工具知识 问题 1: 工期和工作量之间的差异是什么? 答案…

Shell 编程快速入门 之 数学计算和函数基础

目录 1. 求两数之和 整数之和 浮点数之和 2. 计算1-100的和 for...in C风格for循环 while...do until...do while和until的区别 关系运算符 break与continue的区别 3. shell函数基础知识 函数定义 函数名 函数体 参数 返回值 return返回值的含义 return与…

opencv 进阶16-基于FAST特征和BRIEF描述符的ORB(图像匹配)

在计算机视觉领域&#xff0c;从图像中提取和匹配特征的能力对于对象识别、图像拼接和相机定位等任务至关重要。实现这一目标的一种流行方法是 ORB&#xff08;Oriented FAST and Rotated Brief&#xff09;特征检测器和描述符。ORB 由 Ethan Rublee 等人开发&#xff0c;结合了…

基于STC15单片机-LM35-DS8B20温度测量-DS1302计时-proteus仿真-源程序

一、系统方案 本设计采用STC15单片机作为主控器。 DS18B20采集温度值送到液晶1602显示。 DS1302计时&#xff0c;日期送到液晶1602显示。 LM35采集另一路温度值送到数码管显示。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /IO初始化为…

前端console.log打印内容与后端请求返回数据不一致

后端传值num0 前端打印num1 ,如图&#xff0c;console.log后台显示的数据与展开后不一致 造成该问题原因是深拷贝与浅拷贝的问题。 var obj JSON.parse(JSON.stringify(res)) 修改后打印 正常

PostgreSQL汉字转拼音首字母

PostgreSQL汉字转拼音首字母&#xff0c;最近有个需求要做搜索优化&#xff0c;要求提取汉字首字母识别输入&#xff0c;图方便直接数据库用函数批量转换了&#xff0c;整理了网上的两个方法函数备忘&#xff0c;非原创。 https://blog.qdac.cc/?p1281 https://developer.aliy…

【0基础入门Python Web笔记】二、python 之逻辑运算和制流程语句

二、python 之逻辑运算和制流程语句 逻辑运算控制流程语句条件语句&#xff08;if语句&#xff09;循环结构&#xff08;for循环、while循环&#xff09;continue、break和pass关键字控制流程语句的嵌套以及elif 更多实战项目可进入下方官网 逻辑运算 Python提供基本的逻辑运算…

疲劳驾驶检测和识别4:C++实现疲劳驾驶检测和识别(含源码,可实时检测)

疲劳驾驶检测和识别4&#xff1a;C实现疲劳驾驶检测和识别(含源码&#xff0c;可实时检测) 目录 疲劳驾驶检测和识别4&#xff1a;C实现疲劳驾驶检测和识别(含源码&#xff0c;可实时检测) 1.疲劳驾驶检测和识别方法 2.人脸检测方法 3.疲劳驾驶识别模型(Python) &#xf…

golang 命令行 command line (flag,os,arg,args)

目录 1. golang 命令行 command line1.1. Introduction1.2. Parsing Arguments from the command line (os package)1.2.1. Get the number of args1.2.2. Iterate over all arguments 1.3. Using flags package1.3.1. Parse Typed Flags1.3.2. Set flags from the script1.3.3…

Android JNI系列详解之AS创建Native C++项目

一、前提 Android Studio版本&#xff1a;Android Studio Electric Eel | 2022.1.1 Patch 1 二、创建Native C项目 1.新建项目 2.选择新建Native C项目 3.New Project 4.选择C标准库的支持版本 5.项目自带的默认生成的代码 6.buil.gradle中也自带了CMakeList的配置&#xff08;…

【ARM64 常见汇编指令学习 20 -- ARM 指令 .include与 .asciz 详细介绍】

文章目录 .include 介绍.asciz 介绍 .include 介绍 在 ARM 汇编语言中&#xff0c;.include 命令用于插入另一个源文件的内容。它的作用类似于 C 语言中的 #include 预处理命令。这个命令通常在源文件的顶部使用&#xff0c;但也可以在任何地方使用。 语法如下&#xff1a; …

冠达管理:股票分红的钱会计算到收益吗?为什么分红之后出现亏损?

我们常说炒股的主要收益来源便是除了高抛低吸赚取差价收益之外&#xff0c;还有参加股票分红取得。那么股票分红的钱管帐算到收益吗&#xff1f;为什么分红之后呈现亏本&#xff1f;下面就由冠达管理为大家剖析&#xff1a; 股票分红的钱管帐算到收益吗&#xff1f; 不会。 股…

变频器和plc之间无线MODBUS通讯

在工业现场由PLC远程控制变频器的应用非常常见&#xff0c;如果挖沟布线不便或者变频器在移动设备上&#xff0c;那么采用无线通讯就是最佳方案。 这里我们选用最常用的三菱 FX2N PLC和三菱变频器为例&#xff0c;并结合日系plc专用无线通讯终端DTD435M来说明PLC与变频器之间的…

iOS swift 类似AirDrop的近场数据传输 MultipeerConnectivity 框架

文章目录 1.github上的demo 1.github上的demo insidegui/MultipeerDemo – github insidegui/MultipeerKit – github

vue中表格数据已更新但界面内容没有更新,修复方案

this.tableData为表格数据&#xff0c;起初表格数据里的结构是固定的比如如下&#xff1a; tableData:[{name:名称‘&#xff0c;age:12}] 初始数据虽然是这样的结构&#xff0c;但有时候结构可能会改{name:名称,age:12,content:内容} 可能要多加一个字段。起初用this.$set以…

生信豆芽菜-信号转导通路相关评分的计算

网址&#xff1a;http://www.sxdyc.com/gradeSigna 1、数据准备 表达谱数据&#xff0c;行为基因&#xff0c;列为样本 2、提交后&#xff0c;等待运行成功即可下载 当然&#xff0c;如果不清楚数据是什么样的&#xff0c;可以选择下载我们的示例数据&#xff0c;也可以关…

生成树协议

生成树协议 生成树协议是一基于OSI网路模型的数据链路层&#xff08;第二层&#xff09;通讯协定&#xff0c;用作确保一个无回圈的区域网络环境。通过有选择性地阻塞网络冗余链路来达到消除网络二层环路的目的&#xff0c;同时具备链路的备份功能&#xff0c;又称扩展树协定。…