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.變數名       //獲取路由傳參的指定引數值