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 ...
随机推荐
- 使用react的一点提醒17/10/26
1.不直接操作dom 今天在和同学讨论的时候,发现了一些以前没注意的问题. 这段时间自己学习时一直都是用原生js写代码,但是以前在公司经常使用jq,也不知不觉间让我习惯了操作dom的倾向. 使用vue ...
- Django之ORM执行原生sql语句
django中的ORM提供的操作功能有限,在模型提供的查询API不能满足实际工作需要时,可以在ORM中直接执行原生sql语句. Django 提供两种方法使用原生SQL进行查询:一种是使用raw()方 ...
- poj3177 无向连通图加多少条边变成边双连通图
Redundant Paths Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15752 Accepted: 6609 ...
- 【Redis】Hash常见应用场景 - 电商购物车
电商购物车 以用户id为key 商品id为field 商品数量为value 购物车操作 [key(用户id),field(商品id),value(数量)] 添加商品 -> hset cart: ...
- 29-3 union的使用
联合结果集union (集合运算符) -------------------------使用union联合结果集---------------- select tsname,tsgender,tsag ...
- python脚本实现接口自动化轻松搞定上千条接口用例
接口自动化目前是测试圈主流的一个话题,我也在网上搜索了很多关于自动化的关键词,大多数博主分享的python做接口自动化都是以开源的框架,比如:pytest.unittest+ddt(数据驱动) 最常见 ...
- Kubernetes学习笔记(七):访问Pod元数据与Kubernetes API
Downward API 我们已经了解到,使用ConfigMap和Secret向应用传递配置数据,这对于运行前预设的数据是可行的.但是对于那些不能预先知道的,就需要使用Downward API. Do ...
- noip2019(普及组) 公交换乘 (不剪枝见祖宗题)
luogu题目传送门 其实就是一道普普通通的模拟题,但是1e5的数据让很多不看数据范围和不加优化的小伙伴们莫名其妙的T了.(包括我) 因此,论减枝的重要性!! 于是乎,最重要的一点也就出来了.早就过期 ...
- [Firefox附加组件]0002.添加菜单项
Add-onSDK 还不能为火狐浏览器提供一个API添加新的菜单项.但它是可扩展的设计,所以任何人都可以建立和发布模块,使用插件开发者.大牛埃里克沃尔德写的MenuItems模块,能够使我们很方便的添 ...
- angularjs 指令传参规则
angularjs 指令传参规则 xx-,data- 驼峰