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的更多相关文章

  1. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  2. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  3. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  4. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  5. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  6. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  7. React Router 4.0 基本使用

    路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...

  8. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

  9. React Router 4.0中文快速入门

    import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...

  10. 笔记react router 4(四)

    看完Router的变化,接着来说<Switch>组件. 在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染. 就像这样, <Route path='/' compo ...

随机推荐

  1. 最短路问题(Bellman/Dijkstra/Floyd)

    最短路问题(Bellman/Dijkstra/Floyd) 寒假了,继续学习停滞了许久的算法.接着从图论开始看起,之前觉得超级难的最短路问题,经过两天的苦读,终于算是有所收获.把自己的理解记录下来,可 ...

  2. juqery 点击分页显示,指定一页显示多少个,首次加载显示多少个

    源代码html: //源代码:html <div class="jq22"> <div class="hidden"> <li&g ...

  3. MySQL数据库(查询语句)

    用户  角色  权限 select * from students1:查询这个表里的数据 select ssex from students1:在这个表里面查询ssex(性别) select dist ...

  4. WPF ComboBox SelectionChanged事件里赋值Text的解决方法

    string sCountry ; private void cbCountry_SelectionChanged(object sender, SelectionChangedEventArgs e ...

  5. 新版Ubuntu安装日文输入法

    在Ubuntu的设置中安装日文输入法 本周在调试书上代码时需要安装日文输入法,我发现在百度上并没有在最新版Ubuntu下安装日文输入法的教程,于是我写了这篇博客来与大家分享一下我的安装过程. a.如图 ...

  6. Windows 10 家庭版/专业版 彻底关闭windows update自动更新

    转载: https://blog.csdn.net/u014162133/article/details/84973426# https://blog.csdn.net/qq_40820862/art ...

  7. centos6 安装python2.7 并做软件兼容处理 及 MySQLdb模块安装

    相关软件准备 https://www.python.org/ftp/python/2.7.15/Python-2.7.15.tgz https://pypi.org/project/setuptool ...

  8. MSMQ 跨服务器读写队列的“消息队列系统的访问被拒绝”的解决方案

    转自https://www.cnblogs.com/jyz/articles/4612333.html 最近项目中需要跨服务器对消息队列进行读写,开始在单独开发机器上进行Queue的读写没问题.但是部 ...

  9. Java-idea-常用插件

    一.插件安装 settings→plugins→直接搜索框搜索,没有选择Browse Respositories→找到需要安装的插件,install即可 二.常用插件 插件名称 简介 地址 备注   ...

  10. dict()的另一种用法

    先了解两个内容: 定义字典的两种方法: d1 = { ‘name’ :‘zzl’} #方法一 d2 = dict( name = 'zzl' ) #方法二 2. __dict__()方法不记录类的属性 ...