1. 安装
react router
有多个版本的包,在web应用使用的是react-router-dom
npm install react-router-dom --save
2. 使用
2.0 准备
在src\index.js
中引入router,并在最外层组件套用Router即可(Router只需要引用一次)
import React from 'react'
import { render } from 'react-dom'
//将Router重命名是为了好切换BrowserRouter与HashRouter
//import { HashRouter as Router } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
render(
<Router>
<App/>
</Router>,
document.querySelector('#root')
)
2.1 Route
在需要路由的组件包一层<Route>
组件
-
∗ \color{red}{*} ∗
path属性
为路由 -
component
是相关组件,即可实现路由功能 -
render
类似component
,可以在里面返回组件或dom来进行渲染,与component
是互斥的render
可以在使用时传递参数,但是component
不可以
render() {
return (
<div>
<ul>
<li>首页</li>
<li>文章</li>
<li>用户</li>
</ul>
<Route path="/render" render={()=><div>render</div>}/>
<Route component={Home} path="/home" />
<Route component={Article} path="/article" />
<Route component={Users} path="/users" />
</div>
)
}
这样在Url中使用路由就可以渲染对应部分
eg:
localhost:3000/home
因为
render
可以传入参数,所以可以进行状态判断来进行不同的渲染,比如说登录判断
compoent
用于没有参数的渲染
2.2 Link
在需要跳转的组件包一层<Link>
组件,to属性
为跳转的路由,即可实现跳转
import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom'
import {
Home,
Article,
Users
} from './views'
export default class App extends Component {
render() {
return (
<div>
<ul>
<li><Link to="/home">首页</Link></li>
<li><Link to="/article">文章</Link></li>
<li><Link to="/users">用户</Link></li>
</ul>
<Route component={Home} path="/home" />
<Route component={Article} path="/article" />
<Route component={Users} path="/users" />
</div>
)
}
}
eg: 给<li>
标签的内容添加跳转
除了Link
组件,还有NavLink
组件
2.3 Redirect
可以将路由重定向,有from
和to
属性。常用于路由不匹配时跳转主页
eg:
<Redirect from="/*" to="home" />
2.4 Switch
<Switch>
组件会将多个Route
包起来,像switch语法一样,跳转第一个匹配的路由,常配合<Redirect>
使用
eg:
<Switch>
<Route component={Home} path="/home" />
<Route component={Article} path="/article" />
<Route component={Users} path="/users" />
<Redirect from="/" to="home" />
</Switch>
但是<Switch>
的匹配路径不是完全匹配,而是模糊匹配,如果想要使用精确匹配可以加入exact
,常用于路由有包含关系时。
eg:
<Switch>
<Route component={Home} path="/home" />
{/*在较短的Route上加入exact可以避免路由Switch拦截问题*/}
<Route component={Article} path="/article" exact/>
<Route component={ArticleDetail} path="/article/:id" />
<Route component={Users} path="/users" />
<Redirect from="/" to="home" />
</Switch>
2.5 history
使用Router
后props
中会有很多关于路由的属性,其中包括history
history
中有很多方法:
比如:想点击某个button返回首页
<button onClick={this.goHome}>跳转首页</button>
...
goHome = () => {
this.props.history.push('/home')
}
同样,push
可以传递参数:
goHome = () => {
// this.props.history.push('/home')
this.props.history.push({
pathname: '/home',
state:{
id: this.props.match.params.id
}
})
}
ren
3. withRouter的使用
组件只有被Router
渲染时才可以使用Router的内容,但是如果有的组件是在其他组件内部被渲染的,没有被Router
渲染,应该怎么使用?
解决方法: 使用withRouter
,withRouter
是一个高阶组件,可以使被修饰的组件实现Router
的方法
eg: 想在组件内部实现跳转主页
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
@withRouter
class BackHome extends Component {
handleClick = () => {
this.props.history.push({
pathname: '/home',
state: {
id: this.props.match.params.id
}
})
}
render() {
return (
<div>
<button onClick={this.handleClick}>跳转首页</button>
</div>
)
}
}
使用withRouter
后,props
中有了Router的方法
4. React Router传参的方式
4.1 使用query字符串传参
显示传参方法
{/* 显示传参--article */}
<Link to="/article/1?from=article">Article 1</Link>
路由:/article/1?from=article
参数可以在props.location.search
获取
4.2 使用state传参
隐式传参方法,常用于埋点
{/* 隐式传参,常用于埋点 */}
<Link to={{
pathname:'/article/2',
state:{
from:'article'
}
}}>Article 2</Link>
路由:/article/2
参数可以在props.location.state
获取
4.3 动态路由
<Route component={ArticleDetail} path="/article/:id"/>
路由:/article/2
参数可以在props.match.params.id
获取