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. poj 3304

    我老人家要开始玩几何了! .这个题有点自闭. 就是问是否存在一条直线经过所有了n条线段,(有交点). 我老人家愚昧不可救药,想了想决定先求出来 这两条直线的交点,然后看是否在线段上.但是一直写不对.. ...

  2. 10.vue框架

    vue框架 易用.灵活.高效 https://cn.vuejs.org/ mvc M model 数据 模型 V view 视图 dom操作 C controller 控制器 路由 C oBtn.on ...

  3. spring 开始构造

    1,选择“org.apache.maven.archetypes:maven-archetype-webapp”骨架(模板),创建一个Web项目: 在main 目录下创建文件夹  java,  res ...

  4. Linux下一台服务器Redis主从复制(master-slave)配置

    主从概念 ⼀个master可以拥有多个slave,⼀个slave⼜可以拥有多个slave,如此下去,形成了强⼤的多级服务器集群架构 master用来写数据,slave用来读数据,经统计:网站的读写比率 ...

  5. pip升级包错误问题解决

    命令框内输入 sudo pip install six --upgrade --ignore-installed six --红色字体表示想要忽略的包名称--

  6. 【Python全栈-后端开发】Django进阶1-分页

    Django[进阶篇-1 ]分页 分页 一.Django内置分页 from django.core.paginator import Paginator, EmptyPage, PageNotAnIn ...

  7. 苹果审核被拒,解析奔溃日志.txt转crash文件

    1. 桌面新建一个文件夹,用来存放crash相关的东西.取名crash 2.下载苹果官方邮件里给的后缀名为 .txt 的被拒附件(这三个txt格式文件为苹果返回的崩溃日志文件),把这三个文件放在刚新建 ...

  8. 对象何时进入老年代、何时发生full gc

    一.对象何时进入老年代 (1)当对象首次创建时, 会放在新生代的eden区, 若没有GC的介入,会一直在eden区, GC后,是可能进入survivor区或者年老代 (2)当对象年龄达到一定的大小 , ...

  9. Linux是cat、tail、head查看文件任意几行的数据

    Linux是cat.tail.head查看文件任意几行的数据 一.使用cat.tail.head组合 1.查看最后100行的数据 cat filename | tail -n 100 2.查看100到 ...

  10. SpringBoot-外部运行jvm参数调优

    外部运行调优 java -server -Xms32m -Xmx32m  -jar springboot_v2.jar