React-router-dom路由的使用

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.变量名       //获取路由传参的指定参数值