react-router中的exact和strict

时间: 2019-05-11阅读: 684标签: 路由

前言

每次用配置react路由都会考虑是否应该给给<Route>组件加上exact或strict。下面妹子将于自认为比较清晰的方式列举出来什么场景需要加和不加。

本文案例主要以react-router v4+为主,v5版本是因为发布时版本依赖有问题而直接跳成这个大版本的,用法和4完全相同,就是这么任性 > < ,升级详情可看本文最后链接


exact

exact默认为false,如果为true时,需要和路由相同时才能匹配,但是如果有斜杠也是可以匹配上的。 如果在父路由中加了exact,是不能匹配子路由的,建议在子路由中加exact,如下所示

//父路由
<Switch>
    <Route path="/a" component={ComponentA} />
</Switch>
//子路由,tuanDetail组件里
<Switch>
        <Route path="/a/b" exact component={ComponentB}/>
</Switch>


strict

<Route strict path="/one" component={About} />

strict默认为false,如果为true时,路由后面有斜杠而url中没有斜杠,是不匹配的


案例



总结

如果没有子路由的情况,建议大家配都加一个exact;如果有子路由,建议在子路由中加exact,父路由不加; 而strict是针对是否有斜杠的,一般可以忽略不配置。


原文来自:https://raoenhui.github.io/react/2019/05/04/exact-strict/


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3264

vue.router中replace需要返回两次问题及解决方案

现有三个页面a , b , c , 递进关系,a页面router.push跳转至b,b再router.push跳转至c,c使用$router.replace()回到b,然后点击b页面的返回键,需要点击两次才能回到a页面

vue 路由模式hash和history的区别

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回index.html文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

JS是如何实现前端路由的 JS实现原生路由

路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时

vue 路由及按钮权限控制 思路总结

前端路由是全部都由后端返回,还是后端返回对应角色下的权限,然后前端通过遍历的方式来修改当前路由呢?第一种后台返回路由,第二种后台返回权限。

React Router拦截器(钩子)、静态路由、route-view 实现

React Router 再 v3 版本之前 是有 onEnter 钩子函数的,也支持静态路由配置;,但到了 v4 版本后钩子函数被移除,官方说是为了将此提供给开发者,由开发者自由发挥。既然如此我们就只能自己实现

前端路由(history+hash)

在传统网站开发中,我们一般使用比如asp、php、jsp等技术进行开发,开发完成后统一部署在服务器上,我们访问时,会在浏览器中发送带有\\\'.asp\\\',\\\'.php\\\',\\\'.jsp\\\'等后缀路径的url请求,服务器会根据对应的路由映射表

Flutter路由导航

我们通常会用屏(Screen)来称呼一个页面(Page),一个完整的App应该是有多个Page组成的。通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换,除了上面这种管理页面的方式,我们还需要实现其它功能的页面跳转

小程序多种路由跳转的区别

从Anjular转换到微信小程序,从功能丰富,便捷操作的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理作用吧,从一开始就觉得它不好用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手

Vue 嵌套路由、路由守卫

嵌套路由挺常用的,比如导航栏有首页、文章、想法、留言4个模块,我们以嵌套路由的形式集成这些模块,在导航栏中点击对应的条目,就会路由到对应的页面(下方显示对应的页面),和html的<iframe>效果差不多。

Vue开发之vue-router的基本使用

如果你用vue-cli脚手架来搭建项目,配置过程会选择是否用到路由,如果选择Yes,后面下载依赖会自动下载vue-router。将组件 (components) 映射到路由 (routes)并渲染

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广