4-2路由

基於瀏覽器環境的開發，只須要安裝react-router-dom

1,第一種跳轉方式（不攜帶參數）

import {BrowserRouter, Route,Link,Switch} from 'react-router-dom’
function App() {  
  return (    
    <div>      
      <BrowserRouter>        
        <Link to="/form">form</Link> <br/>        
        <Link to="/clock">clock</Link>       
       <Switch>          
        <Route path="/form" component={Form}></Route>        //注意攔截的路徑（一旦匹配上，不會再向下匹配了，所以將複雜路徑放前面，簡易的放後面）        
        <Route path="/clock" component={Clock}></Route>        
       </Switch>      
      </BrowserRouter>    
    </div>      
);}

 2，第二種跳轉方式（js方法，攜帶參數）

API跳轉

在組件中經過this.props.history控制路由的改變
this.props.history.push('/content')     將新的路徑壓入到history中
this.props.history.push({
    pathname:'/studentDetails',   //路徑名
    payload:record　　　　　　　　　　　//參數
})

這種方式跳轉能夠經過 this.props.location.payload來獲取傳遞的參數record

this.props.history.go(n)    n爲正數或者負數，表示前進或者後退
this.props.history.goBack()     後退
this.props.history.goForward()    前進

 

3，使用路由 (而且攜帶參數)

HTML方式
    <Link to={{ pathname: ' /user' , query : { day: 'Friday' }}}>

 HTML方式：<Link to={{ pathname : ' /user' , state : { day: 'Friday' }}}> 
同query差很少，只是屬性不同，並且state傳的參數是加密的，query傳的參數是公開的，在地址欄