React-router-dom的入门使用
1.项目引入react-router-dom
安装:
npm install react-router-dom --save
引入:
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect
} from 'react-router-dom'
2.使用:
使用Link标签作为跳转a标签
<Link to='/path' />
使用Route 标签作为显示(展示)标签。
<Route path='/...' component={组件名} />
3.注意:
使用路由时,需要在最外层包裹Router标签,否则会报错
render(){
return(
<Router>
<Link to='...' />
...
<Route path='/...' component={...}>
</Router>
)
}
4.路由传参:
只需在Route标签的path属性做小修改即可。
<Route path='/路劲名/:id' component={...} />
id为所接收的参数名
在组件内使用props属性内的match属性获取路由相关的属性值。match就相当于vue内的$route对象
this.props.match.url //获取路由url
this.props.match.变量名 //获取路由传参的指定参数值