react-router4.0 從零快速上手,4個關鍵概念
看了好多寫react-router的文章,一上來都是和以前有什麼不同,和3.0有什麼不同,哪裡更好了,哪裡不好了。
搞得跟學術討論一樣,服了各位大神。
我就想知道怎麼用。
教學大綱
- Router
- Route
- 執行函式來跳轉
- 獲取url引數
首先
npm install --save react-router-dom
這裡用的是 react-router-dom,直接用就好了
1.Router
使用react-route你要寫的第一句程式碼:
import { HashRouter as Router } from "react-router-dom"
// 這裡的Router其實是HashRouter,
const App = () => (
<Router>
<div> anything here </div>
</Router>
)
把<Router/>
放在應用最外層,把其他元件包裹起來,
Router也就用這麼一次,不會再出現了,
感覺上,Router就像Redux中的Provider
2.Route
Router和Route有什麼區別? 前者多了一個
r
import { Route } from 'react-router-dom'
...
<Router>
<div> anything here </div>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</Router>
...
每一個Route要傳入一個path和一個component
一個path(url) 對應 一個元件
比如 輸入 localhost:8000/#/about
,
就會渲染About元件(mount),
Home和Topics元件就會不見了(unmount),
(出現了#
是因為我們用的是HashRouter
)
插一句
所以
簡單一點來解釋路由這個概念,就是
通過匹配url的值,來選擇渲染哪些元件,和不渲染哪些元件
3.執行函式來跳轉
基本的,你可以使用Link元件來跳轉,
import { Link } from 'react-router-dom'
...
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/topics">Topics</Link>
...
如果使用函式來跳轉怎麼做呢
// About元件
const About = ({ history }) => {
function onClick(){
history.push('/topics')
}
return <div onClick={onClick}>About</div>
}
引數history
是從<Route>
那裡傳過來的,
<Route path="/about" component={About}/>
用history的push方法,就可以去到對應的url
4.獲取url引數
我們有這樣一個路由對映的配置,
或者說,
有一個這樣的<Route/>
:
<Route path="/topics/:topicId" component={Topic}/>
這裡的path稍微有點不同,多了個冒號,
如果在url中輸入localhost:8000/#/topics/abcdefg
,
那麼這裡的:topicId
就等於abcdefg
然後,Topic元件:
const Topic = ({ match, history }) => (
<div>
{match.params.topicId} // abcdefg
</div>
)
match就跟history一樣,也是來自route的,
通過match的params屬性,就可以拿到url上的同名引數
5.路由改變,元件部分改變
有時我們不需要整個元件完全重新渲染,
比如這樣,
路由改變,高亮的選項也改變
這裡需要用到withRouter
這個api
import { withRouter } from 'react-router-dom'
function Tabs({ history, location }){
if(location.pathname=="/abc") {
// do something...
}
return (<div>...</div>)
}
export default withRouter(Tabs)
經過withRouter處理的元件,會帶上location、history、match三個引數,
location會根據url的變化而變化,
元件只是部分重新渲染,而不是重新掛載(mount)