看了好多写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)