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-路由的更多相关文章

  1. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  2. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  3. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  4. react路由配置(未完)

    React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...

  5. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...

  6. react 路由 react-router@3.2.1

    react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...

  7. React路由配置

    React路由简单配置 //入口文件index.js import React from 'react'; import ReactDom from 'react-dom'; import { Rou ...

  8. 【React 8/100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  9. 我的一个react路由之旅(步骤及详图)

    今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...

  10. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

随机推荐

  1. python之Python VS Code下载和安装教程

    Visual Studio Code,简称 VS Code,是由微软公司开发的 IDE 工具.与微软其他 IDE(如 Visual Studio)不同的是,Visual Studio Code 是跨平 ...

  2. 【比较】遗传算法GA和遗传编程GP有什么不同?

    遗传算法GA 本质上有一个固定的长度,这意味着所产生的功能有限的复杂性 通常会产生无效状态,因此需要以非破坏性方式处理这些状态 通常依赖于运算符优先级(例如,在我们的例子中,乘法发生在减法之前),这可 ...

  3. Linux系统rabbitmq安装

    rabbitmq消息队列(Message Queue)是一种应用间的通信方式,消息发送后可以立即返回,由消息系统来确保消息的可靠传递.消息发布者只管把消息发布到 MQ 中而不用管谁来取,消息使用者只管 ...

  4. python3.x 基础一:str字符串方法

    *字符串不能更改值 数据类型字符串str |  capitalize(...)   返回字符串中第一个字母大写 |      S.capitalize() -> str |       |    ...

  5. Linux的svn服务器搭建

    最近把Linux上的一些服务器学习了一遍 我这里更新一下笔记——SVN服务器 我从其他博主上学习了一下——转载https://www.cnblogs.com/mymelon/p/5483215.htm ...

  6. SSH_ProductCRUD的项目结构与配置文件

    项目结构 各类配置文件 <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hib ...

  7. PHP实现插入100万条数据优化

    第一种方法一条一条执行插入,结果会很慢 <?php header("Content-Type:text/html;charset=utf-8"); date_default_ ...

  8. 如何利用Xpath抓取京东网商品信息

    前几小编分别利用Python正则表达式和BeautifulSoup爬取了京东网商品信息,今天小编利用Xpath来为大家演示一下如何实现京东商品信息的精准匹配~~ HTML文件其实就是由一组尖括号构成的 ...

  9. Docker 入门:容器

    容器看着像机器,实际是进程,是一个运行时程序. 要操作一个 Docker 容器,只需要执行 docker container 命令. 可以通过 help 查看 run 运行容器 基础使用: docke ...

  10. DataFrame的apply用法

    DataFrame的apply方法: def cal_value_percent(row,total_value): row['new_column']=row[estimated_value_col ...