SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制?
- SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制?
可以这样做:
- 登陆之前,所有页面跳到 登陆页面;包括随便输入的路由地址。
- 登陆后,跳到相应页面;随便输入的、不存在的路由地址,才跳到404页面。
- react项目代码示例:
- 路由是login或其他:
https://github.com/cag2050/react_eject_antd_demo/blob/master/src/index.js
switch 是只能选择一个
<Switch>
<Route exact path='/login' component={Login}/>
<Route component={App}/>
</Switch>
- 路由是要进入的页面或找不到:
https://github.com/cag2050/react_eject_antd_demo/blob/master/src/components/MyLayout.js
switch 是只能选择一个
<Switch>
{router.map((route, i) => <PrivateRoute key={i} exact={!!route.exact} path={route.path} component={route.component}/>)}
<PrivateRoute component={NotFound}/>
</Switch>
SPA项目中,404页面 和 登陆页面 对应的路由,应该怎样控制?的更多相关文章
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- 小KING教你做android项目(二)---实现登陆页面并跳转和简单的注册页面
原文:http://blog.csdn.net/jkingcl/article/details/10989773 今天我们主要来介绍登陆页面的实现,主要讲解的就是涉及到的布局,以及简单的跳 ...
- spring项目中web-inf下不能引用页面资源
1.spring项目结构 2.spring结构说明 web-inf目录是不对外开放的,外部没办法直接访问到(即通过url访问),只有通过映射来访问,如映射一个action或servlet通过服务器端跳 ...
- VUE项目中使用this.$forceUpdate()强制页面重新渲染
在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,我是在使用多层v-for嵌套时出现这种问题的, 解决方法:运用 this.$force ...
- 一个Django项目中实现的简单HTML页面布局
1 - 基础页面(被继承的模板) {% load static %} <!DOCTYPE html> <html lang="en"> <head&g ...
- vue2项目中better-scroll 插件使用时候页面不滚动
参考这里 1.外面包裹层的高度没有设置或者条目的高度没有超过外面包裹层的高度 2.初始化BetterScroll的时机不对,当前元素还没有正常渲染出来,导致BetterScroll的高度的计算错误
- create-react-app 搭建的项目中,让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化
第一种:BrowserRouter把Menu和Route组给一起包起来 <Router></Router> 标签要把Menu和Route组给一起包起来 修改src/index. ...
- vu项目中按F5刷新element菜单没有根据路由匹配菜单解决办法
element组件的菜单中设置:default-active,这个是选择哪个菜单的 然后在created里边增加 因为每次刷新都是要经过这个的.注意data里边也要同步.
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
随机推荐
- Java语法基础学习DaySeven
---恢复内容开始--- 一.包装类——Wrapper 1.定义:针对八种基本数据类型定义相应的引用类型——包装类(封装类) boolean——Boolean byte——Byte ...
- final文案+美工
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476] 文案+美工: 剧情设计+题目设计+美工: 第21关: 剧情: 计算机学 ...
- WIFI探针 搞定
- C# 解压
需要ICSharpCode.SharpZipLib.dll 网上有很多 先添加文件引用 再添加引用 using ICSharpCode.SharpZipLib.Zip; #region 解压 /// ...
- Shiro自定义Realm时用注解的方式注入父类的credentialsMatcher
用Shiro做登录权限控制时,密码加密是自定义的. 数据库的密码通过散列获取,如下,算法为:md5,盐为一个随机数字,散列迭代次数为3次,最终将salt与散列后的密码保存到数据库内,第二次登录时将登录 ...
- 基于C#利用ffmpeg提取视频帧
利用ffmepg提取视频帧实际上是利用C#调用ffmepg命令行进行处理对应的视频,然后输出出视频帧 GetPicFromVideo("); static public string Get ...
- rsync命令
1.rsync命令(文件同步工具,可以理解为动态备份): rsync是linux系统下的数据镜像备份工具.使用快速增量备份工具Remote Sync可以远程同步,支持本地复制,或者与其他SSH.rsy ...
- Hadoop错误:java.io.IOException: Incompatible clusterIDs
问题: 配置Hadoop集群时,一个节点的DataNode无法启动 排查: 查看hadoop-root-datanode-bigdata114.log文件,错误信息如下: java.io.IOExce ...
- C++学习(十三)(C语言部分)之 练习
打印图像 要用循环 空心或者实心都可以1.矩形 菱形 三角形 梯形 六边形2.打印倒三角形的99乘法表 具体测试代码如下: /* 1.打印图像 要用循环 空心或者实心都可以 矩形 菱形 三角形 梯形 ...
- 《DSP using MATLAB》Problem 5.2
代码: %% ---------------------------------------------------------------------------------- %% Output ...