zoukankan      html  css  js  c++  java
  • 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传的参数是公开的,在地址栏
  • 相关阅读:
    点云处理算法核心-八叉树
    点云平台之cloudCompare开发三
    点云法向量估计方法
    PCL源码编译
    PCL裁剪之多边形裁剪
    点云平台PCLvisualization多边形裁剪方法初探
    点云合并pcl重载“+”
    点云平台之CloudCompare开发二
    点云平台之QtitanRibbon
    神舟电脑 战神ZX6-CT5A2 键盘失灵
  • 原文地址:https://www.cnblogs.com/wskb/p/11207492.html
Copyright © 2011-2022 走看看