react-router 4.0(四)跳转404
import React from 'react'
import ReactDOM from 'react-dom'
import {
HashRouter,
Route,
Link,
Prompt,
Switch
} from 'react-router-dom' const Other = ({location})=>(
<h3>没有这个地址……{location.pathname}</h3>
) export default class App extends React.Component {
render(){
return(
<HashRouter>
<div>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/one">第一页</Link></li>
<li><Link to="/two">第二页</Link></li>
</ul>
<Switch>
{/* 渲染第一个被location匹配到的并且作为子元素的<Route>或者<Redirect>,
当找到匹配的<Route>后会停止继续匹配 */}
<Route path="/" exact render={()=><h3>首页</h3>}/>
<Route path="/one" render={()=><h3>One</h3>}/>
<Route path="/two" render={()=><h3>Two</h3>}/>
<Route component={Other}/>
{/* 不存在的url跳转渲染Other这个404组件 */}
</Switch>
</div>
</HashRouter>
)
}
} ReactDOM.render(<App/>,document.getElementById("app"))
react-router 4.0(四)跳转404的更多相关文章
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- 初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- React Router 4.0 基本使用
路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...
- React Router 4.0 ---- 嵌套路由和动态路由
嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...
- React Router 4.0中文快速入门
import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...
- 笔记react router 4(四)
看完Router的变化,接着来说<Switch>组件. 在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染. 就像这样, <Route path='/' compo ...
随机推荐
- ffmpeg 转换 mp4 成 flv
参考资料: https://addpipe.com/blog/flv-to-mp4/ ffmpeg -i demo.mp4 -c:v libx264 -crf 19 demo.flv 或者 ffmpe ...
- java 查看线程死锁
那我们怎么确定一定是死锁呢?有两种方法. 1>使用JDK给我们的的工具JConsole,可以通过打开cmd然后输入jconsole打开. 1)连接到需要查看的进程.
- dubbo控制器xml文件报错
在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: Multiple annotations found at th ...
- VLAN之间通信-三层交换
实验目的 VLAN之间通信-三层交换 掌握配置VLANIF接口的方法 理解数据包跨VLAN路由的原理 掌握测试多层交换网络连通性的方法 实验原理 三层交换机在原有二层交换机的基础之上增加了路由功能,同 ...
- linux--- python3环境部署篇
环境部署 我们在pycharm上都是自己设置的python3解释器的环境变量,使得代码能够正常执行!可是怎么能让我们的python代码在LINUX上跑起来呢? linux是内置python,可是内置的 ...
- MOT大连站 | 卓越研发之路:前沿技术落地实践
还在讨论究竟哪种编程语言更容易深度学习?哪种编程语言更具有价值?如果你是资深技术人员又或者是团队负责人,在机器学习.微服务.Spring 5反应式编程等方面遇到了问题,不妨参加一场由msup和微软联合 ...
- Vijos 1360 - 八数码问题 - [A*]
题目链接:https://vijos.org/p/1360 优先队列BFS: 这个八数码问题本身其实是之前人工智能实验课的作业…… 首先,如果不带估价函数,直接用优先队列BFS,肯定也是能得到正确结果 ...
- PE、PB、PEG三大估值法的正确使用方法!
目前市面上的估值方法有很多,比如PE估值法.PB估值法.PEG估值法,但是我相信,真正会用的人并不多,比如说目前动态市盈率121倍的比亚迪真的高估吗?比如目前市净率为0.63倍的众泰汽车真的是破净股吗 ...
- Ubuntu 18.04 安装Docker
第一种方法从Ubuntu的仓库直接下载安装: 安装比较简单,这种安装的Docker不是最新版本,不过对于学习够用了,依次执行下面命令进行安装. $ sudo apt install docker.io ...
- 使用hashlib进行文件校验
import hashlib import os path = r'D:\CentOS 64 位' def file_md5(path): """ 文件校验 :param ...