完整版: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. JVM——Java虚拟机架构

    0. 前言 Java虚拟机(Java virtualmachine)实现了Java语言最重要的特征:即平台无关性. 平台无关性原理:编译后的 Java程序(.class文件)由 JVM执行.JVM屏蔽 ...

  2. git push 使用

    git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pull命令相仿. $ git push <远程主机名> <本地分支名>:<远程分支名> ...

  3. python模块(2)

    1.OS模块 print(os.getcwd()) #获取当前工作目录 os.chdir('E:\python练习\python35学习') #更改目录 print(os.getcwd()) E:\p ...

  4. dockerfile debian 和pip使用国内源

    python官方镜像是基于debian的.国内使用时定制一下,加快下载速度. 1 debian本身使用国内源 dockfile中: #国内debian源 ADD sources.list /etc/a ...

  5. CC2 条理分明-----独立思考

    独立思考 前几天啊,在吃饭的时候,听到同事们在讨论某幼儿园事件,因为没有人愿意出来作证,所以很可能是造谣.前几天他们还咬牙切齿的指责这个幼儿园,现在怎么就变了.我发现人们的思维变化的太快,我自己也是的 ...

  6. Axure 第一次交互 实现跳转页面

  7. 20170914xlVBA通讯公司分类汇总

    Sub 租房() Dim Wb As Workbook Dim Sht As Worksheet Dim OpenWb As Workbook Dim OpenSht As Worksheet Dim ...

  8. PHP单例模式 demo

    <?php class single{ static public $db; private function __construct(){ }; static function getinst ...

  9. AS(Android Studio)不停的updating indices

    有同事问我他as进入后updating iindices个不停 就在此处一直刷一直刷,虽然对他项目没什么影响,但总归很是烦人,解决办法如下: 打开File->Invalidate Caches ...

  10. 暂时关闭 windows 病毒防护