完整版: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. FILE,id不一致

    当图片全部是新增的时候,id和FILE一一对应,后台可以匹配处理. array(1) { ["banner_img"] => array(5) { ["name&q ...

  2. python中enumerate内置库的使用

    使用enumerate,可以自动进行索引下标的赋值,本例代码中使用enumerate,进行excel单元格的赋值操作. 代码如果重复被调用,可将该代码封装成类进行使用 1 import openpyx ...

  3. [转]C++中const、volatile、mutable的用法

    原文:https://blog.csdn.net/imJaron/article/details/79657642 const意思是“这个函数不修改对象内部状态”. 为了保证这一点,编译器也会主动替你 ...

  4. 学习笔记10—Python 绘图集

    ordered_data = np.load('ordered_data_just_TD_mae.npy')results = pd.Series(np.squeeze(np.load('result ...

  5. mysql指定编码集

    DROP TABLE app_info CREATE TABLE `app_info` ( `app_id` ) NOT NULL COMMENT '应用ID', `) NOT NULL COMMEN ...

  6. gdb 不同位置,函数调用参数显示差异

    gdb 不同位置,函数调用参数显示差异,如: copy_strings (argc=1, argv=0xffcf08, page=0xffce6c, p=131068, from_kmem=2) at ...

  7. 关于Handler中Message的创建问题

    Message用来定义一个包含任意数据的消息对象,这个消息对象是可以被发送给Handler处理的. 我们最好通过Message.obtain()和Handler.obtatinMessage()来得到 ...

  8. android -------- ConstraintLayout介绍 (一)

    ConstraintLayout 翻译为 约束布局,也有人把它称作 增强型的相对布局,由 2016 年 Google I/O 推出. 扁平式的布局方式,无任何嵌套,减少布局的层级,优化渲染性能.从支持 ...

  9. Count Up Down(上下计数)

    这个题目是 Kayak 发布的代码挑战题目. 最简单的描述就是不使用循环,输出 0 到 5,然后同样不是会用循环的方式再次输出 5 到 0. 英文描述 Part 1 Write a program t ...

  10. Pytorch半精度浮点型网络训练问题

    用Pytorch1.0进行半精度浮点型网络训练需要注意下问题: 1.网络要在GPU上跑,模型和输入样本数据都要cuda().half() 2.模型参数转换为half型,不必索引到每层,直接model. ...