react router @4 和 vue路由 详解(二)react-router @4用法
完整版: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'
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用法的更多相关文章
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
- react router @4 和 vue路由 详解(三)react如何在路由里面定义一个子路由
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 5.react如何在路由里面定义一个子路由? a.引入在需要子路由的页面引入Rout ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...
- Vue 路由详解
Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...
随机推荐
- 部署NTP服务器进行时间同步
NTP服务端:linl_S IP:10.0.0.15 NTP客户端:lin_C IP:10.0.0.16 NTP服务概述 1.原理 NTP(Network TimeProtocol,网络时 ...
- StringBuilderWriter 这个类需要commons.io.2.6这个包才可以使用, 在maven仓库中搜
- Centos 7系统挂载NTFS格式移动硬盘
有些时候做大数据量迁移时,为了快速迁移大数据,有可能在Linux服务器上临时挂载NTFS格式的移动硬盘, 一般情况下,linux是识别不了NTFS格式移动硬盘的(需要重编译Linux核心才能,加挂NT ...
- 《剑指offer》第六十三题(股票的最大利润)
// 面试题63:股票的最大利润 // 题目:假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖交易该股 // 票可能获得的利润是多少?例如一只股票在某些时间节点的价格为{9, 11, 8, 5 ...
- 学习笔记5—Python 将多维数据转为一维数组 (总结)
<code class="language-python">import operator from functools import reduce a = [[1,2 ...
- JAVA基础知识总结:十九
一.多线程使用过程中的临界资源问题 1.临界资源:被多个线程同时访问的资源 临界资源产生的原因:有多个线程同时访问一个资源的时候,如果一个线程在取值的过程中,时间片又被其他的线程抢走了,临界资源问题就 ...
- Getting Started withProcessing 第八章总结
运动 在这一章中,作者讲述了如何对图元中的对象进行实现动画的效果. 实现运动的几种方式 在书中,作者通过讲解一些对应的知识,让图元能够产生移动的效果.这几种方式包括: 速度和方向 在全局变量中定义两个 ...
- boke例子: freermarker:在使用ajax传递json数据的时候多出冒号
boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...
- 20180429 xlVBA套打单据自适应列宽
Sub TestAutoAdjustColumnWidthBaseOnModel() Set ModelSheet = ThisWorkbook.Worksheets("单据模板" ...
- vs2013+caffe+cpu
1.下载caffe官网提供的工具包,复制Windows下CommonSettings.props.example,后缀改为CommonSettings.props 2.由于电脑无GPU,所以修改复制过 ...