完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html

2、react-router @4用法

  a、大概目录

       不需要像vue那样麻烦的用到一个单独的文件夹,react只需要在index.js中部分配置即可


  b、准备工作

     yarn add react-router-dom

   index.js中

     import { BrowserRouter } from 'react-router-dom'

   

          <BrowserRouter>
            <App />
          </BrowserRouter>
    这样App内部组件都可以使用
 

 
  c、使用
       同样是上面那个例子,写法不一样:
import React, { Component } from 'react';
import {Bar} from 'components/common/ibar' import ShopDetail from 'pages/shopDetail/shopDetail' import NodeDe from 'pages/noteDetail/NodeDe' import Car from 'pages/car/Car' import Admin from 'pages/admin/Admin' import Admin1 from 'pages/admin/Admin1' import GoodDetail from 'pages/goodDetail/goodDetail' import { Route, Switch, Redirect } from 'react-router-dom' class App extends Component {
render() {
return (     //这里为什么要用Switch包裹呢?
    //<Switch>是唯一的因为它仅仅只会渲染一个路径
<Switch>      //Redirect代表重定向,如果加了exact代表精准匹配
<Redirect exact from="/" to="/home"></Redirect>
<Route path='/home' component={Bar}/>
<Route path="/shopDetail/:shopId/:shopName/:shopNote/:shopPic" component={ShopDetail} />
<Route path='/noteDetail/:noteId' component={NodeDe} />
<Route path='/goodDetail/:goodId/:shopId' component={GoodDetail} />
<Route path='/car' component={Car} />
<Route path='/admin' component={Admin}/>
<Route path='/admin1/:phone' component={Admin1}/>
</Switch>
);
}
} export default App;

    当点击哪里需要跳转的时候,在标签外面包一个<Link to= ' 路由路径 ' ></Link>    

    动态路由/xxx/:xx,如上图

    

    引申1:HashRouter和BrowserRouter

      它们两个是路由的基本,就像盖房子必须有地基一样

      我们需要将它们包裹在最外层,我们只要选择其一就可以了。

      现在讲它们的不同:

     HashRouter

       如果你使用过react-router2或3或者vue-router

       你经常会发现一个现象就是url中会有个#,

例如localhost:3000/#

HashRouter就会出现这种情况,它是通过hash值来对路由进行控制

如果你使用HashRouter,你的路由就会默认有这个#。

       

       BrowserRouter

很多情况下我们则不是这种情况,我们不需要这个#

       因为它看起来很怪,这时我们就需要用到BrowserRouter。

    引申2:Link和NavLink的选择

      两者都是可以控制路由跳转的,不同点是NavLink的api更多,更加满足你的需求。

         Link:主要api是to,to可以接受string或者一个object,来控制url

      

  

      NavLink:它可以为当前选中的路由设置类名、样式以及回调函数等。

              

    引申3:withRouter高阶组件

//引入withRouter
import {
Link,
withRouter
} from 'react-router-dom' //代码结尾暴露的时候,把要暴露的组件包裹在withRouter中,做成一个高阶组件,
//将react-router 的 history,location,match 三个对象传入
//将组件包一层withRouter,就可以拿到需要的路由信息
//获取路由信息的时候this.props.location
withRouter(GoodDetail)

withRouter(connect(mapState, mapDispatch)(GoodDetail))

react router @4 和 vue路由 详解(二)react-router @4用法的更多相关文章

  1. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  2. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  3. react router @4 和 vue路由 详解(三)react如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 5.react如何在路由里面定义一个子路由?   a.引入在需要子路由的页面引入Rout ...

  4. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  5. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  6. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  7. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  8. react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...

  9. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

随机推荐

  1. 部署NTP服务器进行时间同步

    NTP服务端:linl_S    IP:10.0.0.15 NTP客户端:lin_C    IP:10.0.0.16 NTP服务概述 1.原理 NTP(Network TimeProtocol,网络时 ...

  2. StringBuilderWriter 这个类需要commons.io.2.6这个包才可以使用, 在maven仓库中搜

  3. Centos 7系统挂载NTFS格式移动硬盘

    有些时候做大数据量迁移时,为了快速迁移大数据,有可能在Linux服务器上临时挂载NTFS格式的移动硬盘, 一般情况下,linux是识别不了NTFS格式移动硬盘的(需要重编译Linux核心才能,加挂NT ...

  4. 《剑指offer》第六十三题(股票的最大利润)

    // 面试题63:股票的最大利润 // 题目:假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖交易该股 // 票可能获得的利润是多少?例如一只股票在某些时间节点的价格为{9, 11, 8, 5 ...

  5. 学习笔记5—Python 将多维数据转为一维数组 (总结)

    <code class="language-python">import operator from functools import reduce a = [[1,2 ...

  6. JAVA基础知识总结:十九

    一.多线程使用过程中的临界资源问题 1.临界资源:被多个线程同时访问的资源 临界资源产生的原因:有多个线程同时访问一个资源的时候,如果一个线程在取值的过程中,时间片又被其他的线程抢走了,临界资源问题就 ...

  7. Getting Started withProcessing 第八章总结

    运动 在这一章中,作者讲述了如何对图元中的对象进行实现动画的效果. 实现运动的几种方式 在书中,作者通过讲解一些对应的知识,让图元能够产生移动的效果.这几种方式包括: 速度和方向 在全局变量中定义两个 ...

  8. boke例子: freermarker:在使用ajax传递json数据的时候多出冒号

    boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...

  9. 20180429 xlVBA套打单据自适应列宽

    Sub TestAutoAdjustColumnWidthBaseOnModel() Set ModelSheet = ThisWorkbook.Worksheets("单据模板" ...

  10. vs2013+caffe+cpu

    1.下载caffe官网提供的工具包,复制Windows下CommonSettings.props.example,后缀改为CommonSettings.props 2.由于电脑无GPU,所以修改复制过 ...