zoukankan      html  css  js  c++  java
  • react-router v3和v4区别

    1.默认路由

    v3 <IndexRoute>

    v4 <Route exact>

    2.授权路由

    import Redirect from 'react-router-dom'

    < Redirect to="home"> 组件
    它会始终执行浏览器重定向,当处于中时,只有其他路由不匹配的情况下,才会渲染重定向组件;

    3.包容性路由

    <header>
    <Route path="/user" component={usertop}/>
    <Route path="/user" component={userbottom}/>
    <Route path="/user/list" component={userlist}/>
    </header>

    V3路由有排他性,即一次只能渲染一条,V4中上面的会将匹配的路由的组件都渲染,v4使用来进行路由排他。例上面,匹配路由 /user 时, usertop userbottom 与 userlist 会同时渲染;

    路由的战略性布局(即使用排他路由策略)

    <header>
    <switch>
    <Route path="/" exact component={home}/>
    <Route path="/user" component={usertop}/>
    <Route path="/user/list" component={userlist}/>
    <Redirect to="/" />
    </switch>
    </header>

    这样的即使没有home没有exact,它也会被渲染因为Redirect;

    路由/user 时,匹配如下:
    匹配了/user,不匹配/user/list(因为这里使用了switch排他路由)

  • 相关阅读:
    春招已近,这份GitHub万星的ML算法面试大全请收下
    [资源推荐] 必须收藏的两个查找论文和代码实现的网站!
    windows下安装pycocotools,亲测有效!
    GAN原理
    2018-07-02
    虚函数和纯虚函数
    友元
    string字符串
    实参和形参
    C/C++学习笔记汇总
  • 原文地址:https://www.cnblogs.com/shenwh/p/12064424.html
Copyright © 2011-2022 走看看