import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import {
HashRouter,
Route,
Link,
Redirect,
withRouter
} from 'react-router-dom' const Home = ({history}) => { return(
<div>
<h2>首页</h2>
</div>
)
} const One = ({history}) => {
return(
<div>
<h2>第一页</h2>
</div>
)
} const Zlink = ({to,val,isexact}) => { return(
<Route path={to} exact={isexact} children={({match})=>{
console.log(match,to.toString())
return(
<div>
{match ? '> ' : ''}<Link to={to}>{val}</Link>
</div>
)
}}
/>
// 当需要根据当前url来编辑导航时,可在Link外面包一个Route标签
// 通过children属性下函数参数match可获取当前url信息
)
} export default class App extends React.Component {
constructor(props){
super(props);
}
render(){
return(
<HashRouter>
<div>
<ul>
<Zlink to="/" val="首页" isexact={true}/>
<Zlink to="/one" val="第一页" isexact={true}/>
</ul> <Route exact path="/" component={Home}/>
<Route path="/one" component={One}/> </div>
</HashRouter>
)
}
} ReactDOM.render(<App/>,document.getElementById("app"))

react-router 4.0(三)根据当前url显示导航的更多相关文章

  1. React Router 4.0 体验

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

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

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

  3. React Router 4.0 实现路由守卫

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

  4. 初步学习React Router 4.0

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

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

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

  6. React Router 4.0中文快速入门

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

  7. React Router V4.0学习笔记

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

  8. React Router 4.0 基本使用

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

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

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

  10. 笔记react router 4(三)

    上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...

随机推荐

  1. 自闭的D7

    先是一道**题然后我死了啊. A: 哇人人都会我不会系列. 我们可以运用逆向思维啊,把它转化成若干个人从点1进来, 然后我们考虑深度 dep,用 num[dep] 表示深度大于等于这个点的有多少个, ...

  2. react+mobx 编写 withStoreHistory 装饰器

    主要作用是向store里面注入一个history对象,方便story里面的函数调用 function withStoreHistory(storeName) { if (!storeName) ret ...

  3. vue里的渲染以及computed的好处

    如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...

  4. c3p0 空指针异常 com.mchange.v2.resourcepool.CannotAcquireResourceException: A ResourcePool could not acquire a resource from its primary factory or source.

    com.mchange.v2.resourcepool.BasicResourcePool$AcquireTask@11d9f05 -- Acquisition Attempt Failed!!! C ...

  5. vue--vuex详解

    安装vuex npm install vuex --save Vuex 什么是Vuex?  官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的 ...

  6. 004-mac下Java6与Java8 安装

    一.Java6安装 官方下载下载地址:http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-down ...

  7. java框架之SpringCloud(1)-微服务及SpringCloud介绍

    微服务概述 是什么 业界大牛 Martin Fowler 这样描述微服务: 参考[微服务(Microservices)-微服务原作者Martin Flower博客翻译]. 下面是关于上述博客中的部分重 ...

  8. 【Assembly】-NO.88.Assembly.2.滴水逆向.1.002-【位运算及基础指令】-

    1.0.0 Summary Tittle:[Assembly]-NO.88.Assembly.2.滴水逆向.1.002-[]- Style:Java Series:Log4j Since:2018-0 ...

  9. Docker:Docker打包Web API成镜像并上传到Docker Hub(2)

    Docker官方镜像:https://hub.docker.com/: 本文将把一个webapi制作成docker镜像 一.Docker命令 打开Docker Quickstart,有以下常用的命令 ...

  10. Python Scrapy爬虫速成指南

    序 本文主要内容:以最短的时间写一个最简单的爬虫,可以抓取论坛的帖子标题和帖子内容. 本文受众:没写过爬虫的萌新. 入门 0.准备工作 需要准备的东西: Python.scrapy.一个IDE或者随便 ...