zoukankan      html  css  js  c++  java
  • React-router3与React-router4的区别

    先说一下React-router4的使用

    要想使用React-router4,需要引入两个东西,

    React-router和React-router-dom

    React-router:React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它不能直接进行Dom操作

    React-router-dom:所以React-router-dom顾名思义就是进行React-router的dom操作了,提供的api有BrowserRouter, Route, Link等

    那么如何使用呢?小编虽然在当时升级V4的过程中踩了不少坑,但是在解决后不得不说此次的升级对比V3还是方便了很多

    回到话题,先说如何使用V4

    一、React-router-dom中的BrowserRouter与HashRouter

    BrowserRouter与HashRouter是包裹在最外层的,让整个组件成为一个路由组件,

    他们的区别在于使用HashRouter的时候你会看到这样的一个路径:      http://localhost:8080/#/home

    而在使用BrowserRouter的时候,路径是这样的:http://localhost:8080/home

    二者的区别一目了然吧,HashRouter带有一个#,

    原理其实就是使用HTML5 history API来使你的内容随着url动态改变的

    二、Route

    router其实就是控制路径对应显示的组件,经常会使用的是exact、path以及component属性

    三、Link与NavLink

     3.1、Link的主要的参数是to,如图是带有传参时的写法,如果不需要传参,则直接写路径即可

    3.2、NavLink

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

    exact用于严格匹配,匹配到/则不会继续向下匹配,to则是控制跳转的路径,activeClassName是选中状态的类名,

    我们可以为其添加样式。我们在/second后面添加1234来想路由中传递信息,这结合了上面Route中的/second/:id,

    四、match与Switch

    match是在使用router之后被放入props中的一个属性,在class创建的组件中我们需要通过this.props.match来获取match之中的信息。

    match中包含的信息如下。常常会获取里面的值进行使用

     

    Switch:Switch常常会用来包裹Route,它里面不能放其他元素,用来只显示一个路由。

    最后,其实写这么多也只是复习一下小编React-router4的区别,现在开始来说区别

    在V3中:

      1、集中式 router,没有React-router-dom(对应下1)

      2、通过 <Route> (使用 {props.children} )嵌套,实现 Layout 和 page 嵌套(对应下2)

      3、Layout 和 page 组件 是作为 router 的一部分()

      4、Dom操作是将整个Router进行操作的(对应下3)

      5、V3 中的 routers 规则是 exclusive,只能匹配一个路径(对应下4)

      6、在路由嵌套中,重复的页面容易都有一个重复的组件,这会导致不必要的请求,会重复消耗多余的流量(对应下5)

     在V4中:

      1、从React-router-dom中引入了BrowserRouter或HashRouter

      2、当 route 匹配时,子组件会被渲染到 <Route> 书写的地方

      3、进行Dom操作的是应用程序本身,而不是整个Router

      4、V3 中的 routers 规则是 exact ,多个 <Route>可以同时匹配和呈现 

      5、match 对象为我们提供了 match.params,match.path,和 match.url 等属性,解决了重复输入,重复渲染

  • 相关阅读:
    闭包
    iframe
    函数声明和函数表达式
    简单的事件委托
    onhashchange
    WebP探索
    Chrome
    适合自己学习的一些网站
    模拟jQuery的一些功能
    __autoload()方法
  • 原文地址:https://www.cnblogs.com/yspace/p/10105954.html
Copyright © 2011-2022 走看看