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 ...
随机推荐
- poj1696
没看题解,搜了一下都是什么叉积凸包,根本没有必要用吧.. 显然这个题我们找夹角就可以了,根据高中的公式 a·b=|a|*|b|*cos<a,b> 所以用点积找一个 cos<a,b&g ...
- Ant 批量执行jmeter 脚本
一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html 命令行输入:java -v ...
- Eclipse使当前项目依赖另一个项目
实例说明 在Eclipse中可以创建多个项目实现不同的软件开发,也可以使用多个项目来开发单独的大型软件,每个项目负责单独的模块部门,这样可以使软件的模块分类更清晰,可以单独的维护每个模块部分.但是项目 ...
- python全栈开发 * 30知识点汇总 * 180713
30 re模块2一.正则表达式在线测试 在线测试工具 http://tool.chinaz.com/regex/(一).*?的用法: . 是任意字符 * 是取 0 至 无限长度 ? 是非贪婪模式.合在 ...
- A - Shashlik Cooking CodeForces - 1040B
http://codeforces.com/problemset/problem/1040/B Long story short, shashlik is Miroslav's favorite fo ...
- PrimeNG之TreeTable
--treetable用于显示分层数据表格的格式 Import import {TreeTableModule,TreeNode,SharedModule} from 'primeng/primeng ...
- 初试kotlin:用Kotlin开发桌面/CommandLine 工具
既然kotlin是google和jetbrain联合搞的,开发环境不用说了肯定是Intellij Idea了. 先创建一个kotlin项目. 先来一个HelloWorld package com.xi ...
- iptables 分析(三)
原文:http://blog.chinaunix.net/uid-24207747-id-2622902.html find_target查到目标并加载成功,返回一个xtables_target型对象 ...
- javaweb(4)之Listener&Filter
监听器 (Listener) 介绍 监听器用于监听 web 应用中某些对象.信息的创建.销毁.增加,修改,删除等动作的发生,然后作出相应的响应处理.当范围对象的状态发生变化的时候,服务器自动调用监听器 ...
- CookieUitl
import javax.servlet.http.Cookie;import javax.servlet.http.HttpServletRequest;import javax.servlet.h ...