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 ...
随机推荐
- js各种获取当前窗口页面宽度、高度的方法
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...
- 25.redux回顾,redux中的action函数异步
回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...
- 编写函数求整形数组a中存储的m个不重复的整数的第k大的整数(其中m>=1,1<=k<=m)很简单的一个思路是酱紫的:管他辣么多干啥,上来一把排序然后直接得答案
/** * @author:(LiberHome) * @date:Created in 2019/2/28 20:38 * @description: * @version:$ *//*编写函数求整 ...
- 将 ASP.NET Core 2.0 项目升级至 ASP.NET Core 2.1 RC 1
今天微软发布了 .NET Core 2.1 RC 1 ,虽然只是 Release Candidate 版,但已经可以在生产环境中使用. NET Core 2.1 RC is supported by ...
- ios证书生成
iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试 发布(Distribution)证书和描述文件 用于提交Appstore 准备环境 必需要 ...
- [04-01]css组合选择器
/* 私人笔记 */ 组合选择器:把基本选择器通过特殊符号串在一起,可以带来一些特殊的意义: 1.源码 <!DOCTYPE html> <html lang="zh&q ...
- Mycat了解下
首先说下,因为本身不怎么推荐中间件,所以我对这东西也只是了解,业内mycat用的最好的应该顺风算一个,但是他们是做过二次开发的,咱菜鸡比不了,据说最近出来一个叫cetus的还不错,有空可以关注下 Ⅰ. ...
- arcmap发布服务报错:“Faild to publish service”
发布gp服务时,Analyze没有重大错误,但是发布结束时提示"Faild to publish service".让人很懵逼: 解决方法: 打开arcgis server man ...
- [iptables] 如何用iptables管理桥接模式下的设备
场景:qemu虚拟机通过tap设备与host的物理网卡通过bridge桥接上网. 如下: [root@host100 ~]# brctl show bridge name bridge id STP ...
- mysql脚本手动修改成oracle脚本
今天有一个需求,立了一个新项目,新项目初步定了使用了现有的框架,但数据库要求由原来的mysql改成oracle,所以原来的基础版本的数据库脚本就需要修改成符合oracle的脚本,修改完成后,总结了一下 ...