react router 配置404页面_react router 404-程序员宅基地

技术标签: redirect  react-router4  嵌套路由  404  react  

react router 配置404页面

使用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页面的解决方案。

查了很久文档和他人的文章,最终找到一个解决方案,借鉴出处:一个神奇的网站

  1. 既然R4是在父组件内部配置路由的,那么内部也要添加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>
    );
  }
}
  1. 直接匹配404依然会渲染父组件,所以我们需要重定向
// 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>
  1. 发现直接redirect到404不太友好,页面路径也变成了404
    在这里插入图片描述
  2. 在根组件添加一个state,来修改总路由配置
// 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显示

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/grepets/article/details/96393575

智能推荐

Yii2.0框架中如何进行身份验证和授权操作?支持哪些认证方式和授权方式?_yii 权限验证-程序员宅基地

文章浏览阅读298次。HttpBearerAuth认证方式也是基于HTTP协议的认证方式,需要在每个请求的Header中传递用户认证信息,与HttpBasicAuth认证方式不同的是,HttpBearerAuth认证方式使用了token的形式传递认证信息。基于规则的访问控制(RBAC)与基于角色的访问控制(RBAC)相似,不同之处在于RBAC需要对每个角色进行繁琐的授权,而基于规则的访问控制可以直接对权限进行授权,更加灵活。表单认证方式是一种传统的认证方式,用户输入用户名和密码,提交后后台进行验证,通过则登录成功,否则失败。_yii 权限验证

redis 报错 ERROR/MainProcess] consumer: Cannot connect to redis:-程序员宅基地

文章浏览阅读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/

Android - 串口快速开发_implementation 'tp.xmaihh:serialport:2.1-程序员宅基地

文章浏览阅读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

1020 月饼 (25分)测试点三,答案正确通不过_pta 月饼测试点3-程序员宅基地

文章浏览阅读550次。我笑了呀今天,我踩了两天的坑,昨天就因为一个+=1和++卡了一下午,今天虽然写错了代码有错在先,但是他妈的这个题把第二批货拉了刚好一半,我刚好算的是另外一半,答案都对就是过不去,回头看的时候也没想到是那个公式的问题,我fo啦!!!!解决的方法是看柳神代码之后无意间发现的我的漏洞,..._pta 月饼测试点3

:bash: ulimit: open files: cannot modify limit: 不允许的操作_色骐琪-程序员宅基地

文章浏览阅读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 文件可以配置用户的硬配置和软配置,硬配置是个上限。当超出上限的修改就会出“不允许的操作”这样的错误。

Ubuntu下重置USB端口(即断电后重新上电)_linux重启usb端口指令-程序员宅基地

文章浏览阅读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端口指令

随便推点

python小作业4代码(简单循环语句的应用)_智力捕鱼python-程序员宅基地

文章浏览阅读1.6k次,点赞5次,收藏10次。任务一:水仙花数判断程序任务内容:水仙花数是一个三位整数,如153是一个水仙花数,是因为该数的百位的立方、十位的立方、个位的立方之和等于该数本身。程序编写要求:使用for语句完成;统计水仙花数个数的值请保存到变量中,并要求自动进行统计。代码:print("所有三位数中的水仙花数如下所示:")count=0for i in range(100,1000): a = i//10..._智力捕鱼python

大数据分析R语言RStudio使用教程_r包一项一项读取不是连续-程序员宅基地

文章浏览阅读8.8k次,点赞9次,收藏74次。  RStudio是用于R编程的开源工具。如果您对使用R编程感兴趣,则值得了解RStudio的功能。它是一种灵活的工具,可帮助您创建可读的分析,并将您的代码,图像,注释和图解保持在一起。  在此大数据分析R语言RStudio使用教程文章中,我们将介绍RStudio免费版本的一些最佳功能:RStudio Desktop。我们收集了一些RStudio的重要技巧,窍门和快捷方式,可快速将您变成RStudio高级用户!  1.在窗口窗格之间快速导航  RStudio窗格可让您访问有关项目的重要信息。知道_r包一项一项读取不是连续

主流爬虫框架的基本介绍_cdp4j和crawler4-程序员宅基地

文章浏览阅读1.3w次,点赞4次,收藏24次。1)、Scrapy:Scrapy,Python开发的一个快速、高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据。Scrapy用途广泛,可以用于数据挖掘、监测和自动化测试.Scrapy吸引人的地方在于它是一个框架,任何人都可以根据需求方便的修改。它也提供了多种类型爬虫的基类,如BaseSpider、sitemap爬虫等,最新版本又提供了web2.0爬虫的支持。Scrap,是碎片的意思,这个Python的爬虫框架叫Scrapy。优点:1.极其灵活的定制化爬取。2.社区人_cdp4j和crawler4

Yolov4性能分析(上)_yolov4参数量-程序员宅基地

文章浏览阅读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参数量

基于 Prometheus 和 Alertmanager 的服务器监控报警邮件通知 (win+centOS7)_windos上prometheus怎么发送警报-程序员宅基地

文章浏览阅读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怎么发送警报

malloc__set_free(pdesc);-程序员宅基地

文章浏览阅读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);

推荐文章

热门文章

相关标签