5、react-路由
1、单页面:(只有一个index.html)(为什么要使用react-router再react中)
所有的组件都是再同一个index.html中进行显示的,它再显示的时候是怎么显示的,通过你点击的连接显示相对应的组件,通过的是路由进行跳转的
想要再react中实现路由的功能,那么就必须要安装支持路由的包才可以
使用路由的原因:让URL和UI组件保持一致
2、react-router、react-router-dom
react中的router本身就是一个组件,换句话来说我们再使用的时候就用的是这个router组件来实现的路由的响应的功能
react-router:提供了实现react中router的核心的api,但是没有提供DOM操作进行路由跳转的api
react-router-dom:再这个包中可以通过dom操作控制路由
再react-router-dom中已经包含了react-router的依赖,所以再安装的时候也可以直接安装一个就是react-router-dom
npm install react-router-dom --save-dev
3、安装过的包的版本号:
webpack:4.0
react:16.0:
新旧生命周期都能用,但是不能混用
react17.0以上的版本只能用新生命周期,旧生命周期就不能用了
react-router:5.0
4、react-router的基本原理(重点内容)
实现URL和UI界面的同步(画的原理图必须要重点掌握)
再react-router中,URL对应location对象,而UI是由react components来决定的,这样的话就转化称了loction对象和components之间的同步问题
5、react-router依赖的基础:history
history可以用来兼容不同的浏览器、再不同的环境下对历史记录的管理,拥有统一的api
history分为三类:
老版本的浏览器中使用的是hashHistory--hashRouter
高版本的浏览器中使用的是browserHistory--browserRouter
node环境中使用的是memoryHistory--memoryRouter
6、使用方法:需要通过react-router-dom载入hashRouter、Route,他们原本都是react中路由的组件
hashRouter:使用的是哪一种模式来实现的react路由
Route:为了让location对象和components同步的
path:设置的是url后边的参数
component:设置的是跳转到哪个组件
Switch:让react默认的包容性路由转化成排它性路由
包容性:既能匹配/又能匹配/home
排他性路由:只能匹配一个要不就是/要不是就是/home
7、如果想要实现导航的话,使用NavLink来完成
NavLink就相当于a标签,to属性就相当于href属性,并且to和path的设置是完全一样的,HashRouter的path中写的是什么to里边写的就是什么
8、再react-router中最主要得是component是由Router中得link,history库起到得是中间桥梁得作用
9、默认如果把NavLink放在得是入口文件app中得话,那么导航是一直存在于页面中得,不管组件如何变化
只让首页中得导航显示,其他页面中得导航不显示:
把导航单独拿出来放到首页得组件中即可
exact属性:默认为false,如果为true得话,代表和路由相同时进行匹配
10、我们现在再写得时候默认是只存在一个路由得,所以直接使用NavLink来表示即可
11、
hashRouter和BrowserRouter最大得区别在于地址栏得显示上:
hashRouter:有#的
browserRouter:不带#的
12、browserHistory实现过程原理
再react都是通过改变状态来达到重新渲染更新的目的
import React from 'react'
// import React,{Component} from 'react'
import ReactDom from 'react-dom' ;
import Home from "./component/home"
import About from "./component/about"
import Abouta from "./component/abouta"
import Aboutb from "./component/aboutb"
import {HashRouter,Route,Switch,NavLink,BrowserRouter} from "react-router-dom"
class HelloB extends React.Component{ render(){
return(
<BrowserRouter>
<Switch> <Route path="/" component={Home} exact/>
<Route path="/about" component={About}>
<Route path="/about/" component={About} exact/>
<Route path="/about/abouta" component={Abouta} />
<Route path="/about/aboutb" component={Aboutb} />
</Route> </Switch>
</BrowserRouter>
)
} } ReactDom.render( <HelloB/>,
document.getElementById("root")
)
路由传值:
1、通过params传值,优点:刷新的时候依然是存在的
缺点:只能传字符串,并且数据不能过大
特点:需要再route加上一个/:id
需要传的值是放在to后边的
获取值的时候使用的是this.props.match.pramps.id,这样的话就可以接收到传递过来的参数id的值了
需要配置的内容
1、路由表中
<Route path='/about/aboutcompony/:id"/ >
2、html
<Link to='/about/aboutcompony/aa'>-->aa就是我们需要传递的参数
3、获取:
this.props.match.pramps.id
--------------------------------------------------------------------------------------------------------------------------------------
2、通过pathname+search进行传值,优点:刷新的时候依然是存在的
缺点:只能传字符串,数据不能过大,并且需要跳转路由进行传值
不需要配置路由表的
只需要再Link和组件中进行获取即可
需要配置的内容:
1、html,所传对象中包含的内容:pathname:路径名,search:要传的数据是什么
<link to={{pathname:'',search:'string'}}>
2、获取:
this.props.history.location.search-->this.props.location.search
3、pathname+state进行传值:必须要跳转路由才能进行获取值
优点:相对于search可以进行对象的传递
缺点:刷新数据丢失
--------------------------------------------------------------------------------------------------------------------------------------
不需要配置路由表
需要配置的内容:
1、html,pathname:代表的是to后边的路径,state是需要穿的数据,参数可以自定可以是对象
<Link to={{pathname:'',state:{}}}>
2、获取:
this.props.location.state
4、pathname+query进行传值:必须要通过路由跳转才能传值,刷新数据丢失
--------------------------------------------------------------------------------------------------------------------------------------
不需要配置路由表
需要配置的内容:
1、html,pathname:代表的是to后边的路径,query是需要穿的数据,参数可以自定可以是对象
<Link to={{pathname:'',query:{}}}>
2、获取:
this.props.location.query.name
2、Link和NavLink
NavLink是Link的一个特定版本,NavLink再选中的时候会默认加上样式,这样就方便我们设置导航
5、react-路由的更多相关文章
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
- react路由配置(未完)
React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...
- React路由-基础篇
React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...
- react 路由 react-router@3.2.1
react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...
- React路由配置
React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...
- 【React 8/100】 React路由
React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...
- 我的一个react路由之旅(步骤及详图)
今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...
- 我的一个React路由嵌套(多级路由),路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
随机推荐
- python之Python VS Code下载和安装教程
Visual Studio Code,简称 VS Code,是由微软公司开发的 IDE 工具.与微软其他 IDE(如 Visual Studio)不同的是,Visual Studio Code 是跨平 ...
- 【比较】遗传算法GA和遗传编程GP有什么不同?
遗传算法GA 本质上有一个固定的长度,这意味着所产生的功能有限的复杂性 通常会产生无效状态,因此需要以非破坏性方式处理这些状态 通常依赖于运算符优先级(例如,在我们的例子中,乘法发生在减法之前),这可 ...
- Linux系统rabbitmq安装
rabbitmq消息队列(Message Queue)是一种应用间的通信方式,消息发送后可以立即返回,由消息系统来确保消息的可靠传递.消息发布者只管把消息发布到 MQ 中而不用管谁来取,消息使用者只管 ...
- python3.x 基础一:str字符串方法
*字符串不能更改值 数据类型字符串str | capitalize(...) 返回字符串中第一个字母大写 | S.capitalize() -> str | | ...
- Linux的svn服务器搭建
最近把Linux上的一些服务器学习了一遍 我这里更新一下笔记——SVN服务器 我从其他博主上学习了一下——转载https://www.cnblogs.com/mymelon/p/5483215.htm ...
- SSH_ProductCRUD的项目结构与配置文件
项目结构 各类配置文件 <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hib ...
- PHP实现插入100万条数据优化
第一种方法一条一条执行插入,结果会很慢 <?php header("Content-Type:text/html;charset=utf-8"); date_default_ ...
- 如何利用Xpath抓取京东网商品信息
前几小编分别利用Python正则表达式和BeautifulSoup爬取了京东网商品信息,今天小编利用Xpath来为大家演示一下如何实现京东商品信息的精准匹配~~ HTML文件其实就是由一组尖括号构成的 ...
- Docker 入门:容器
容器看着像机器,实际是进程,是一个运行时程序. 要操作一个 Docker 容器,只需要执行 docker container 命令. 可以通过 help 查看 run 运行容器 基础使用: docke ...
- DataFrame的apply用法
DataFrame的apply方法: def cal_value_percent(row,total_value): row['new_column']=row[estimated_value_col ...