技术标签: redirect react-router4 嵌套路由 404 react
使用Vue相关的技术栈2年左右了,在路由管理上一直用的比较得心应手,现在的项目使用react开发,路由自然也就切换到了react router,所用版本为react router 4
在Vue router配置中,我们可以很简单的配置出404页面
使用通配符 * 号匹配所有路由,并将此配置放在数组的最末端,当前面的路由都匹配不上时,就会匹配到 * 号,然后我们使用redirect 配置将路由重定向到404component
此配置方法不管是对于单级路由还是嵌套路由都适用,只要匹配不到,最终都可以通过 * 来redirect
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/404',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
children: [
{
path: 'page1',
name: 'page1',
component: page1
},
{
path: 'page2',
name: 'page2',
component: page2
},
]
},
{
path: '*',
redirect: '/404'
}
]
})
那么 react router 4 有什么不同的地方呢?
首先是配置子路由的位置不同
react router 4配置嵌套路由是在所在组件里面进行配置
// Parent component
<Switch>
<Route path="/Page" component={Page} />
<Route path="/Sub" component={Childs} />
</Switch>
// Child component
const Childs = ({ match }) => (
<div>
<Switch>
<Route path={`/Sub/page1`} component={Page1} />
<Route path={`/Sub/page2`} component={Page2} />
</Switch>
</div>
);
在父组件里定义好子组件
这样就可以通过 '/Sub/page1’访问到该路由页面了
其次,react router 4还在路由匹配上有些不同,R4没有通配符* ,取而代之的是在路由最后可以添加
<Switch>
<Route path="/Page" component={Page} />
<Route path="/Sub" component={Childs} />
<Route component={NoMatch} /> // 匹配未找到的路由
</Switch>
参考链接:react router官方文档
这时候,我们添加404页面在根组件,it works!
但是,我们的需求往往不是这么简单,通常情况下,我们希望在所有路由情况下他都可以校验路由是否不存在
problem:
在嵌套路由下,我们发现:访问 /Sub/page3’’ 仍然可以看到不完整的路由页面,虽然没有匹配到page3,但是router匹配到了/Sub,这时候问题来了,子路由匹配不到404页面啊。
我查看了当前比较火的react前端解决方案 <react-admin>和<ant-design-pro>,发现他们都没有全局404页面的解决方案。
查了很久文档和他人的文章,最终找到一个解决方案,借鉴出处:一个神奇的网站
// 在子组件中添加404路由
<Switch>
<Route path={`/Sub/page1`} component={Page1} />
<Route path={`/Sub/page2`} component={Page2} />
<Route component={NoMatch} />
</Switch>
// NoMatch(404)组件
class NoMatch extends React.Component {
componentDidMount() {
}
render() {
return (
<div className="404">
404
</div>
);
}
}
// RedirectAs404
const RedirectAs404 = ({ location }) => <Redirect to='/404' />
// 通过Redirect将当前路由重定向到
<Switch>
<Route path={`/Sub/page1`} component={Page1} />
<Route path={`/Sub/page2`} component={Page2} />
<Route component={RedirectAs404} />
</Switch>
// RedirectAs404
const RedirectAs404 = ({ location }) => <Redirect to='{Object.assign({}, location, { state: { is404: true } })}' />
// App.js 这里指根组件
<Route render={({ location }) => (
location.state && location.state.is404
? <NoMatch />
: <Switch>
<Route path="/Page" component={Page} />
<Route path="/Sub" component={Childs} />
<Route component={RedirectAs404} />
</Switch>
)} />
这样,不管是第几级的组件,当只要匹配到RedirectAs404组件,都会重定向到404页面,也就做到了全局404显示
文章浏览阅读298次。HttpBearerAuth认证方式也是基于HTTP协议的认证方式,需要在每个请求的Header中传递用户认证信息,与HttpBasicAuth认证方式不同的是,HttpBearerAuth认证方式使用了token的形式传递认证信息。基于规则的访问控制(RBAC)与基于角色的访问控制(RBAC)相似,不同之处在于RBAC需要对每个角色进行繁琐的授权,而基于规则的访问控制可以直接对权限进行授权,更加灵活。表单认证方式是一种传统的认证方式,用户输入用户名和密码,提交后后台进行验证,通过则登录成功,否则失败。_yii 权限验证
文章浏览阅读2.4k次。用win10连接虚拟机redis的时候报错 一直提示ERROR/MainProcess] consumer: Cannot connect to redis: …修改配置文件 protected-mode no 改为 yes 不能用守护进程运行redisbind 127.0.0.1 更改为 bind 0.0.0.0开放6379端口 firewall-cmd --zone=publi..._error/mainprocess] consumer: cannot connect to redis://:**@39.106.37.4:6379/
文章浏览阅读1.7k次。简单使用,但缺少了一点灵活性(只能修改波特率和串口路径,其余按默认值来)1、添加依赖build.gradle(:app) —> dependencies{ 添加 }implementation 'tp.xmaihh:serialport:2.1'2、配置 public static SerialHelper serialHelper; public static String SPORT_NAME = "/dev/ttyS6"; //串口路径 public static._implementation 'tp.xmaihh:serialport:2.1
文章浏览阅读550次。我笑了呀今天,我踩了两天的坑,昨天就因为一个+=1和++卡了一下午,今天虽然写错了代码有错在先,但是他妈的这个题把第二批货拉了刚好一半,我刚好算的是另外一半,答案都对就是过不去,回头看的时候也没想到是那个公式的问题,我fo啦!!!!解决的方法是看柳神代码之后无意间发现的我的漏洞,..._pta 月饼测试点3
文章浏览阅读1.4w次。 [root@qs-xezf-db2 ~]# su - oracle-bash: ulimit: open files: cannot modify limit: 不允许的操作[oracle@qs-xezf-db2 ~]$ linux对用户有默认的ulimit限制,/etc/sysconfig/limits.conf 文件可以配置用户的硬配置和软配置,硬配置是个上限。当超出上限的修改就会出“不允许的操作”这样的错误。
文章浏览阅读8.1k次,点赞2次,收藏31次。1.把下面的代码保存为usbreset.c文件,保存在home路径下/*重启usb硬件端口*/#include <stdio.h>#include <unistd.h>#include <fcntl.h>#include <errno.h>#include <sys/ioctl.h>#include <linux/us..._linux重启usb端口指令
文章浏览阅读1.6k次,点赞5次,收藏10次。任务一:水仙花数判断程序任务内容:水仙花数是一个三位整数,如153是一个水仙花数,是因为该数的百位的立方、十位的立方、个位的立方之和等于该数本身。程序编写要求:使用for语句完成;统计水仙花数个数的值请保存到变量中,并要求自动进行统计。代码:print("所有三位数中的水仙花数如下所示:")count=0for i in range(100,1000): a = i//10..._智力捕鱼python
文章浏览阅读8.8k次,点赞9次,收藏74次。 RStudio是用于R编程的开源工具。如果您对使用R编程感兴趣,则值得了解RStudio的功能。它是一种灵活的工具,可帮助您创建可读的分析,并将您的代码,图像,注释和图解保持在一起。 在此大数据分析R语言RStudio使用教程文章中,我们将介绍RStudio免费版本的一些最佳功能:RStudio Desktop。我们收集了一些RStudio的重要技巧,窍门和快捷方式,可快速将您变成RStudio高级用户! 1.在窗口窗格之间快速导航 RStudio窗格可让您访问有关项目的重要信息。知道_r包一项一项读取不是连续
文章浏览阅读1.3w次,点赞4次,收藏24次。1)、Scrapy:Scrapy,Python开发的一个快速、高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据。Scrapy用途广泛,可以用于数据挖掘、监测和自动化测试.Scrapy吸引人的地方在于它是一个框架,任何人都可以根据需求方便的修改。它也提供了多种类型爬虫的基类,如BaseSpider、sitemap爬虫等,最新版本又提供了web2.0爬虫的支持。Scrap,是碎片的意思,这个Python的爬虫框架叫Scrapy。优点:1.极其灵活的定制化爬取。2.社区人_cdp4j和crawler4
文章浏览阅读2.2k次。Yolov4性能分析(上)一.目录实验测试1) 测试介绍2) Test3) Train二.分析1.实验测试1实验测试方法Yolov4训练train实验方法(Darknet should becompiled with OpenCV):duration_run_detector:./darknet detector train cfg/coco.datacfg/yolov4.cfg data/yolov4.conv.137Yolov4测试test实验方法(Yolo _yolov4参数量
文章浏览阅读2.1k次,点赞2次,收藏5次。基于 Prometheus+Grafana +wmi_exporter(Windows)/ node_exporter(Linux) 的 监控系统详见之前的文章,相关的原理和概念不再赘述。Windows 下搭建 wmi_exporter+Prometheus+Grafana 服务器性能监控平台Linux(CentOS7) 下搭建 node_exporter+Prometheus+Grafana ..._windos上prometheus怎么发送警报
文章浏览阅读975次。#include #include #include #include #include #include #ifndef _POSIX_#include _PNH _pnhHeap = NULL; /* pointer to new() handler */#endif#ifdef MTHREADvoid * _CALLTYPE1 malloc ( size_t size ){ void *pr__set_free(pdesc);