目录
引入
项目引入
直接引入
页面栈
基本使用
BrowserRouter（Router）
Switch
Link
Route
path
component
render
exact
children
Redirect
from|to
Prompt
when
message
代码跳转链接
路由传参?
withRouter()
示例
match
isExact
params
path
url
location
hash
pathname
search
state
?????????history
length
action
push
replace
go
goBack
goForward
block
v5到v6区别
react路由文档
引入 项目引入 npm install react-router-dom --save 直接引入 <script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script> 页面栈
当发生路由切换的时候，页面栈的表现如下：
下面例子默认只显示one和two，当点击one或two时，下面会对应显示one或two。点击third时会重定向到one。点击other时，显示no match。
import React, { Component } from 'react' import { Link, BrowserRouter as Router, Switch, Route， Redirect } from 'react-router-dom' function RouteOne() { return <h1>one</h1> } function RouteTwo() { return <h1>two</h1> } export default class testR extends Component { render() { return ( <Router> <ul> <li> <Link to='/first'>one</Link> </li> <li> <Link to='/second'>two</Link> </li> <li> <Link to='/third'>third</Link> </li> <li> <Link to='/other'>other</Link> </li> </ul> <Switch> <Route path='/first' exact Component={RouteOne}></Route> <Route path='/second' Component={RouteTwo}></Route> <Redirect from='/third' render={()=><h1>two</h1>}></Redirect> <Route render={()=><h1>no match</h1>}></Route> </Switch> </Router> ) } } BrowserRouter（Router）管理所有路由系统。下面的标签都必须写在Router标签内。只能有一个子元素。
Switch路由自动切换组件，相当于vue中的router-view。没有匹配到路径不会有任何显示。
Link路由跳转，是router中的“超链接”，相当于vue中router-link，点击会跳转to属性对应的链接。
Route存储组件和路径的对应关系。
path路由组件的路径和Link的to属性对应。没有path属性时，对应的是没有匹配的路径，此时会显示该Route对应的内容。
componentpath路径下对应显示的组件（组件需要继承了react.Component）。使用方式component={组件名}。
render和component属性之间只能有一个，对应一个函数，返回的内容为path路径下对应显示的内容。例如：render={(routerProps)=><div>Home</div>}。
exact用于精准匹配时，Route的路径匹配模式默认是模糊匹配，即path=‘/first’会匹配到任何以/first开头的路径。
children对应一个函数（和render相同），接收同样的参数，但是不管路径是否匹配到返回的内容都会被渲染，没匹配到时routerProps.match属性为undefined。
Redirect路由重定向组件。
from|to当跳转到from对应的链接时，重定向到to对应的链接。
Prompt确认框组件。在跳转前弹出提示框提示是否要跳转过去。
when当为true时，跳转前才会弹出提示框。
message提示框中的提示文字。
代码跳转链接只有通过组件注入路由相关的值后才能使用，this.props.history.push('/first')，此时url链接在后面拼接/first。相当于vue中的this.$router.push('/first')。
路由传参?默认在Route组件的render属性对应的函数中会接收一个参数，该参数里面有路由信息，可以在其中拿到参数。
withRouter()向组件的props中注入路由相关的值 （history、location、match属性）。Route中传入占位符，Link跳转链接中拼接对应参数，这样便会添加到对应的match的params属性下。
示例下面有2种获取参数的方法，一个是render属性的函数中对应的参数，一个通过withRouter注入对应类组件的this.props。
import React, { Component } from 'react' import { Link, BrowserRouter as Router, Switch, Route, withRouter } from 'react-router-dom' class RouteOne extends Component { render(){ console.log(this.props) const { name, age } = this.props.match.params return <h1>{name} is {age}</h1> } } withRouter(RouteOne) export default class testR extends Component { render() { return ( <Router> <ul> <li> <Link to='/first/yf/18'>one</Link> </li> <li> <Link to='/second/yf/17'>two</Link> </li> </ul> <Switch> <Route path='/first/:name/:age' Component={RouteOne}></Route> <Route path='/second/:name/:age' render={(routerProps)=>{ console.log(routerProps) return <h1>two</h1> }}></Route> </Switch> </Router> ) } }下面是routerProps打印的对象的属性。?
match携带匹配结果及url参数
isExact是否设置了严格匹配。
params路由携带参数。
pathRoute中定义的path路径（通常和url相同，带参数时不同）。
url当前的实际路径。
location当前实际路径的解析结果。
hash哈希值。例如localhost:3000/blog/index?id=1#title，哈希值为#title
pathname完整的路径，例如localhost:3000/blog/index?id=1#title，路径为/blog/index。
searchurl中的搜索语句，例如localhost:3000/blog/index?id=1#title，搜索语句为?id=1。
state页面跳转传递的参数。
history历史记录操作的封装。 length入栈的历史记录数量。
action当前栈动作（PUSH|REPLACE|POP）
push新记录入栈，push(path,[state])接收2个参数，一个是路径，一个是页面跳转参数为可选的。
replace替换当前的记录，replace(path,[state])接收2个参数，一个是路径，一个是页面跳转参数为可选的。
go在栈中将指针移动n个位置，go(number)。当前位置为0.
goBack等价于go(-1)，一般相当于回退操作。
goForward等价于go(1)，一般相当于前进操作。
block组织路由跳转，类似与Prompt组件，block(message)。调用会产生一个提示框，message为提示框显示的文本，取消会不跳转。
v5到v6区别解读《React Router从v5到v6》 - 知乎
react路由文档Introduction | React Router 中文文档
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
