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页面. 一般的处理方法是: 在 ...
随机推荐
- 四、使用汇编编写LED裸机驱动
1. 确定硬件连接 打开OK6410底板电路图,找到LED,可以发现NLEDx为0时LED点亮. 找到LED的控制引脚,发现LED控制引脚通过连接器连到了核心板: 打开核心板电路图,找到对应的连接器中 ...
- python day04 作业答案
1. 1) li=['alex','WuSir','ritian','barry','wenzhou'] print(len(li)) 2) li=['alex','WuSir','ritian',' ...
- angular 项目 error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'
删除 node_modules ,用 npm install 就可以了, cnpm install (竟然不行)
- Java技术体系
Shell 解释型编程语言(脚本语言都是解释型语言) Shell通过解释器/bin/bash 解释,运行在进程中 Java 编译型解释型语言(先编译再解释) Java通过编译器转换成字节码语言,再用过 ...
- post-image.sh hacking
#********************************************************************************* #* post-image.sh ...
- Gtk-WARNING **: cannot open display: :0.0
Gtk-WARNING **: cannot open display: :0.0 https://blog.csdn.net/Rong_Toa/article/details/80365932
- paddle——docker实践
Docker image阅读:https://github.com/PaddlePaddle/book/blob/develop/README.cn.md docker run -d -p 8888: ...
- Readability Assessment for Text Simplification -paper
https://pdfs.semanticscholar.org/e43a/3c3c032cf3c70875c4193f8f8818531857b2.pdf 1.introduction在Brazil ...
- SQL经常使用的一些词
sp_helptext: 例:exec sp_helptext proc_name(查看存储过程的定义) sp_rename: 例:exec sp_rename 'proc_name1','proc_ ...
- Python基础线程和协程
线程: 优点:共享内存,IO操作时,创造并发操作 缺点:枪战资源 线程不是越多越好,具体案例具体分析,请求上下文切换耗时 IO密集型适用于线程,IO操作打开文件网络通讯类,不需要占用CPU,只是由CP ...