React —— 路由

下载 npm install react-router-dom -S

react-router-dom 提供的子组件

1.BrowserRouter 跳转模式 vue中的history模式

属性：		类型

{
1.basename 字符 basename= “/react” 在所有位置的基本URL后面添加/react
2.forceRefresh 布尔 forceRefresj = true 是否调整时强制刷新
}

2.HashRouter 约定跳转模式，为hash模式 在地址上拼接一个#

3.NavLink 声明式跳转 有跳转激活状态 （如果对路由跳转有更多要求建议使用NavLink）

4.Link 声明式跳转 --push 没有激活状态 （虽然功能少，但是性能高）

属性：		类型

{
1.to 字符

	<Link to="/about">关于</Link>		

	
	// to为obj

<Link to={{
	pathname: '/courses',
	search: '?sort=name',
	hash: '#the-hash',
	state: { fromDashboard: true }
}}/>

如果传递是一个对象的话

pathname 是你要跳转的地址

search 是你地址后面？ 需要拼接传递的数据

传递过去 props.location{ search：" ? goods_id = 1 "}

如果你要使用的话需要将 " ? goods_id = 1 " 转换为 { goods_id : 1 }

第三方库querystring 字符转化为对象

安装第三方库命令 npm i querystring

import querystring from 'querystring';


let str = 'name=swt&age=20'

console.log(querystring.parse(str)) //{name: "swt", age: "20"}  解析成js对象

let obj = {name: "swt", age: "20"}

console.log(qs.stringify(obj)) //name=swt&age=20

2.replace	布尔 			是否替换历史记录

}

5.Redirect 重定向 --replace （自带路由上下文）

属性： 类型

{
1.from 字符 来自
2.to 字符 || 对象 去向 将跳转 / 的路由跳转到 /home
3.push 布尔 是否添加历史记录
4.exact 函数 严格匹配
5.sensitive 布尔 区分大小写
}

6.Route 注册路由地址

属性：		类型

{
1.path 字符 || 数组 可以接受多个路由匹配一个组件
2.exact 布尔 exact代表当前路由path的路径采用精确匹配，一般path=”/"这个路由一般会加上exact
3.component 函数或者组件 在地址匹配的时候React的组件才会被渲染，route props也会一起被渲染
4.render 函数 可以在函数里执行相对的逻辑操作，但是需要返回一个组件 类似component
}

7.Prompt 后置守卫

react非路由跳转组件获取上下文

1.通过路由跳转

给最大的App组件添加路由，默认如果不加path 默认所有路由都会匹配到当前组件

App组件拿到了路由上下文，并且被Route套了起来

{
	import {BrowserRouter, Route} from 'react-router-dom
	
	ReactDom.render(
		<BrowserRouter>
			 <Route component={App}/>  
		</BrowserRouter>,
  	     	document.getElementById('root')
	）

}openImg

2.通过属性传递

通过属性传递的方法解决,默认将没有路由上下文的组件 传递自定义属性的方式传递数据

<ChildA history={this.props.history} match={this.props.match} location={this.props.location}/>

或者

<ChildA {...this.props}/>

3.通过withRouter包装

withRouter（App）方法默认接受组件，将没有上下文的组件传进去，

就可以把不是通过路由切换过来的组件中，将 history、location、match 三个对象传入props对象上

import {withRouter} from 'react-router-dom'

class App extends Component{}

export default withRouter(App)

`` 模板字符串是js语句如果在jsx中使用需要加上{ } =============>>>

路由传递数据

params 参数 props.match.params 

<Link to = "/home/123">

<Route path = "/home/:abc" component...>

this.props.match {abc = 123}

search 参数  props.location.search 

在地址后面拼接 <Link to = "/home/ ? id = 123 & age = 11">

<Route path = " /home component..."> 注册的路由地址不需要配置

this.props.location  数据 { ？id = 123 & age = 11 }

需要用到querystring库来转换数据

import qs from "querystring"

qs.parse( this.props.location.search ) 字符转对象

{ ？id = 123 & age = 11 } 转化为 { id : 123 , age : 11}

qs.stringify( obj )  对象转字符

state 参数 props.location.state 

		<Link to={{
  			pathname: '/courses',	跳转的地址
  			search: '?sort=name',
  			hash: '#the-hash',
  			state: { fromDashboard: true }	传入的state数据
		}}/>

就是通过Link 跳转 为对象形式的时候 在里面传入state 参数 search 参数

编程式路由跳转

replace跳转携带params参数

配置动态路由 在地址 / 的后面直接拼接数据

params参数

this.props.history.replace( `/home/${ id }` )

this.props.history.push( `/home/${ id }` )

search参数

注册路由的时候不需要配置，直接通过问好后面添加数据 通过插件来解析数据

this.props.history.replace( `/home? a = 123` )

this.props.history.push( `/home? a = 123` )

state参数

this.props.history.replace( `/home`, { id:11 } )

this.props.history.push( `/home`, { id:11 } )

路由的方法和属性

history：

go （）

goBack （） 倒退

goForward （）前进

push （）

replace（）

location：

pathname:""

search: ""

state:undefined

match：

params:{ }

path:"",

url:""	

withRouter（ ）

export default withRouter ( ) 接受一个参数： 一般组件

让一般属性拥有路由的属性

没有路由跳转的一般组件都不具有路由上下文

解决因为没有跳转，而没有路由上下文的问题

BrowserRouter 和 HashRouter的区别

底层原理：
BrowserRouter使用的是H5的history

HashRouter使用的是URL的哈希值

path的表现形式：

BrowserRouter 路径没有#

HashRouter路径上拼接#

刷新对state的影响

BrowserRouter 没有影响 state保存在history对象中

HashRouter 刷新会导致state参数的丢失

路由懒加载

import React, { lazy, Suspense } from "react"

引入lazy Suspense

lazy：默认接受一个函数 按需引入组件

Const Home = lazy( () => { import ("./Home") } )

注册路由的标签使用< Suspense/ > 组件包裹

< Suspense fallback = { <Loading/> }/ >
	<Route ...>
< /Suspense >

按需加载路由， 如果路由加载中就调用Loading 组件 可以设置loading效果

React中的遍历li并添加路由

 state = {
        navs:[{to:"Home",text:"按钮1"},{to:"Ddex",text:"按钮2"},{to:"Adex",text:"按钮3"}]
    }

this.state.navs.map（（ item, index ）=> {
	<li key = { index }>
		<Link to = `{ / ${ item.to } }`>{ item.text }</Link>
	</li>
）