Router
1.安裝router
cnpm i react-router-dom -S
2.在最頂層引入router(只有最頂層才需要Router,一個app只需要一個Router)
import { BrowserRouter as Router } from 'react-router-dom'
複製程式碼
或者
import { HashRouter as Router } from 'react-router-dom'
複製程式碼
3.Route建立
用於根據path渲染,path屬性是一個字串,還有一個component,render方法,使用route元件渲染的元件,內部可以直接通過this.props去獲取路由相關資訊
用Route元件渲染的元件,內部可以通過this.props去獲取路由相關資訊,比如history, match,location這些物件,最好的方式是在內部把console.log(this.props)
(1)component方法
元件會直接渲染,可以直接在Home元件中,通過this.props來獲取到router的一些操作方法
// 父元件
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
<Route path='/home' component={Home} />
</Router>
複製程式碼
// 子元件
import React, { Component } from 'react'
export default class Home extends Component {
render() {
console.log(this.props)
return (
<div>
主頁
</div>
)
}
}
複製程式碼
訪問home頁面
列印this.props
(2)render(這種叫做renderProps中)
使用render自定義渲染,渲染的結果返回一個element或者component,這個render是一個方法,這個方法的引數就是router相關的一些props
注意:
這裡一定得把props擴充套件傳遞到元件裡,要不然,在元件裡,就不能通過 this.props來獲取到router的一些操作方法 及屬性
// 父元件
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
<Route path="/about" render={(props) => {
return (
<div>
<h3>關於我們</h3>
<About {...props} />
</div>
)
}} />
</Router>
複製程式碼
// 子元件
import React, { Component } from 'react'
export default class About extends Component {
render() {
console.log(this.props)
return (
<div>
關於
</div>
)
}
}
複製程式碼
訪問about頁面
4.Link(NavLink)
用於跳轉,必須有一個to引數,to引數可以是一個字串路徑,也可以是一個物件,物件可以通過state來傳遞引數,this.props.history.push(這裡和Link元件的to一致)
<Link to="/home">主頁</Link>
<Link to="/about">關於</Link>
複製程式碼
5.exact屬性
完全匹配path的時候,才會渲染,如果有一丁點兒不匹配,就不會渲染
6.Redirect重定向
<Redirect to="/home" from="/" />
複製程式碼
7.Switch
只會匹配一個子元件,只要匹配到一個,就不會再往下匹配,所以,在配置路由的時候,可能需要注意一下順序
<Switch>
<Route />
</Switch>
複製程式碼
8.withRouter高階元件(截持渲染)
用於沒有通過Route渲染的任意元件的props上注入路由相關的props
Home是一個元件
export default withRouter(Home)
複製程式碼
9.裝飾器模式
cnpm i babel-plugin-transform-decorators-legacy -D
複製程式碼
@withRouter
複製程式碼