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传的参数是公开的，在地址栏