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 ...
随机推荐
- JVM——Java虚拟机架构
0. 前言 Java虚拟机(Java virtualmachine)实现了Java语言最重要的特征:即平台无关性. 平台无关性原理:编译后的 Java程序(.class文件)由 JVM执行.JVM屏蔽 ...
- git push 使用
git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pull命令相仿. $ git push <远程主机名> <本地分支名>:<远程分支名> ...
- python模块(2)
1.OS模块 print(os.getcwd()) #获取当前工作目录 os.chdir('E:\python练习\python35学习') #更改目录 print(os.getcwd()) E:\p ...
- dockerfile debian 和pip使用国内源
python官方镜像是基于debian的.国内使用时定制一下,加快下载速度. 1 debian本身使用国内源 dockfile中: #国内debian源 ADD sources.list /etc/a ...
- CC2 条理分明-----独立思考
独立思考 前几天啊,在吃饭的时候,听到同事们在讨论某幼儿园事件,因为没有人愿意出来作证,所以很可能是造谣.前几天他们还咬牙切齿的指责这个幼儿园,现在怎么就变了.我发现人们的思维变化的太快,我自己也是的 ...
- Axure 第一次交互 实现跳转页面
- 20170914xlVBA通讯公司分类汇总
Sub 租房() Dim Wb As Workbook Dim Sht As Worksheet Dim OpenWb As Workbook Dim OpenSht As Worksheet Dim ...
- PHP单例模式 demo
<?php class single{ static public $db; private function __construct(){ }; static function getinst ...
- AS(Android Studio)不停的updating indices
有同事问我他as进入后updating iindices个不停 就在此处一直刷一直刷,虽然对他项目没什么影响,但总归很是烦人,解决办法如下: 打开File->Invalidate Caches ...
- 暂时关闭 windows 病毒防护