react-router 4.0(三)根据当前url显示导航
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显示导航的更多相关文章
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- 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 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- 初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- React Router 4.0中文快速入门
import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...
- 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(三)
上一篇我们说到了路由组件的嵌套.想必你已经运用自如了.那么,这一次我们来聊一聊4.X中Router的变更. 在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可. 例如, ...
随机推荐
- php操作redis案例
<?php //实例化 $redis = new Redis(); //连接服务器 //默认端口是6379,可不写 $redis->connect( ...
- Jquery 获取 radio选中值,select选中值
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...
- pythonic operations
变量交换 >>> a, b = b, a 循环遍历区间元素 >>>for i in range(10): ... print (i) 返回的是生成器对象,生成器比列 ...
- css3贝塞尔曲线
http://yisibl.github.io/cubic-bezier/#.17,.67,.94,.53 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 ...
- js获取谷歌浏览器版本 和 js分辨不同浏览器
// 获取谷歌版本 function getChromeVersion() { var arr = navigator.userAgent.split(' '); var chromeVersion ...
- GitLab使用公钥SSH key登录
SSH key提供了一种与GitLab通信的方式,能够不输密码就进行版本控制 第一步,检查SSH key是否存在 如果存在则把SSH Key放到GitLab上,如果不存在则生成新的SSH Key,再放 ...
- SecureCRT操作指令
连接服务器,文件——连接SFTP会话,然后可以help查看命令 传输文件需要明确并处在客户端和服务器端两个正确路径下, 服务器端的操作: cd——去服务器指定的路径 pwd——查看服务器端当前目录 l ...
- 2016CCPC长春 - B/D/F/H/I/J/K - (待补)
目录: B - Fraction D - Triangle F - Harmonic Value Description H - Sequence I I - Sequence II B题:HDU 5 ...
- 架构4(lvs lb集群解决方案二 lvs+keepalived)
keepalived 1.实现调度器的HA 2.对realserver做健康检测 3.动态维护ipvs路由表
- 转:解决tomcat服务器跨域问题
原文地址: 解决tomcat服务器跨域请求问题 注:还未测试 在tomcat 的web.xml 配置文件中加入如下配置过滤器 (如web.xml中有多个filter时要把下面配置放在最前端) < ...