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：要传的数据是什么

--------------------------------------------------------------------------------------------------------------------------------------

不需要配置路由表
需要配置的内容：
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-路由

最新文章

热门文章