react-router 4.0(一)
import React from 'react';
import ReactDOM from 'react-dom'
import {Link,Route,HashRouter} from 'react-router-dom'
//HashRouter在开发阶段用
const Home = () => (
<div>
<h2>首页</h2>
</div>
) export default class App extends React.Component { render(){
return(
<HashRouter>
{/* 包裹的为路由元素,不生成dome节点 */}
<div>
<Link to="/">主页</Link>
<Link to="/one">第一页</Link>
<Link to="/two">第二页</Link> <Route exact path="/" render={()=>(
<h2>主页</h2>
// 这个render返回的其实是一个js对象
)}/>
<Route path="/one" render={()=>(
<h2>第一页</h2>
)}/>
<Route path="/two" render={()=>(
<h2>第二页</h2>
)}/>
</div>
</HashRouter>
)
}
} ReactDOM.render(<App/>,document.getElementById("app"))
react-router 4.0(一)的更多相关文章
- 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 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- 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.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
随机推荐
- package.json文件配置信息
1.概述 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据).npm install命令根据这个配置文 ...
- WordCount扩展
码云地址:https://gitee.com/xjtsh/ExpandedWordCount 功能实现: wc.exe -c file.c //返回文件 file.c 的字符数 wc.exe ...
- Oracle课程档案,第十六天
restore:恢复文件 recover: 恢复日志 丢失current日志组(正常关闭数据库):故障:SQL> select group#, status from v$log; 确认curr ...
- CodeForces 733B Parade
B. Parade time limit per test1 second memory limit per test256 megabytes inputstandard input outputs ...
- 洛谷试炼场 - 关卡1-5 - 简单字符串 - (Done)
P1055 ISBN号码 #include<bits/stdc++.h> using namespace std; string s; ]={','X'}; int main() { ci ...
- python 缺少module
ImportError: No module named lxml ImportError: No module named PyQt4.QtCore sudo apt-get install pyt ...
- maven build resources
1.在我用springboot+mytatis时,生成完mapper后,然后访问网站总是报错 错误信息: Servlet.service() for servlet [dispatcherServle ...
- OAuth2认证和授权:AuthorizationCode认证
前面的OAuth2认证,里面的授权服务器都是用的identityserver4搭建的 ids4没有之前一般都是Owin搭建授权服务器,博客园有很多 ids4出来后,一般都是用ids4来做认证和授权了, ...
- 【转】jira插件Zephyr的具体使用
在工作中,我们通常是在excel表格中编写测试用例,增删改查功能都不错,但保存.管理.共享都不完美,为了让公司领导或其他同事方便查看测试执行情况和测试进度,我们引入了TestLink工具来编写测试用例 ...
- sparse-table模板
预处理: void init(int n) { ;i < n;i++) { dp[i][] = a[i]; } int bitn = (int)(log(n)/log(2.0)); ;j < ...