试着用React写项目-利用react-router解决跳转路由等问题(一)
转载请注明出处:王亟亟的大牛之路
继续本周的大方向,继续学习React,昨天把简单的hi all内容呈现出来后,今天研究如何多页面或者实现页面嵌套,
开始今天的内容前老规矩,先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android
在传统的静态网页里,我们页面跳转通过超级链,页面重定向,转发等等姿势来解决多页面展示和逻辑跳转,而React对这部分做了很好的封装,也做成了 主件。
要是用也是国际惯例,npm下!!
npm install -S react-router
下完后直接import就可以使用,像这样
import { Router, Route, hashHistory } from 'react-router';
Router是大壳子,类似于路由容器的东西
Route是具体实施路由的对象
hashHistory表示路由切换的hash值,决定最终结果
因为直接的项目结构比较建的随意,所以把目录进行了重新整理,把main.js变成一个大容器,不做任何业务主件使用,像这样。
这一部分 react官方的例子写的很详细很棒,大家也可以看https://github.com/reactjs/react-router-tutorial,或者把他的demo跑一跑 豁然开朗。
上面提到了router其实和使用常规主件一样倒入,使用即可最基本的也就是以下这种形式
<Router><<Router>
我们先来写一个简单的页面
首先是昨天的ui搬家到了新的first.js
import React from 'react';
import styled from 'styled-components';
import { Router, Route, hashHistory } from 'react-router';
const Input = styled.input`
font-size: 1.25em;
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;
&:hover {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
`;
const H1 = styled.h1`
background-color: #a1a
`;
export default React.createClass({
render() {
return (
<div>
<Input placeholder="@mxstbr" type="text" />
<H1>i am first h1</H1>
</div>
);
}
})
然后在我们的main.js
调用他
import React from 'react';
import { render } from 'react-dom';
import { Router , Route , hashHistory } from 'react-router';
import first from './first';
render((
<Router history={hashHistory}>
<Route path="/" component={first}/>
</Router>
), document.getElementById('app'))
我们倒入了 first和react-router所用到的相关对象
Router容器下有一个Route节点会让我们的页面中多出first部分的内容
长这样
那我如果要路由到其他页面呢?
那我们来建一个页面来让他渲染
two.js
import React from 'react';
import styled from 'styled-components';
const H3= styled.h3`
background-color: #a11
`;
export default React.createClass({
render(){
return (
<H3>i am two h3</H3>
);
}
})
这是一个最基本的页面,就不解释了(建议手打,找找手感)
需要修改的知识main.js里的render部分
render((
<Router history={hashHistory}>
<Route path="/" component={first}></Route>
<Route path="/two" component={two}/>
</Router>
), document.getElementById('app'))
浏览器输入http://localhost:8080/#/two
看看效果吧
因为主件可以是单一控件,也可以是试图组,所以Router也是,它可以嵌套多个<route>
新建一个 three.js试试吧
import React from 'react';
import styled from 'styled-components';
const H2 = styled.h2`
color: #eee
`;
export default React.createClass({
render(){
return(
<H2>i am three H2</H2>
)
}
})
页面和two.js一样所以可以copy下。
我们强行让three嵌套入first
修改如下
render((
<Router history={hashHistory}>
<Route path="/" component={first}>
<Route path="/three" component={three}/>
</Route>
<Route path="/two" component={two}/>
</Router>
), document.getElementById('app'))
其实现在的内容就是
<first>
<three></three>
</first>
输入http://localhost:8080/#/three
看看吧
这一篇简单的介绍下这一套姿势如何简单的使用,其实react大多数功能都是如此,封装的简单易用,下一篇还会讲 路由相关
周末愉快!!!
试着用React写项目-利用react-router解决跳转路由等问题(一)的更多相关文章
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
转载请注明出处:王亟亟的大牛之路 本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink和 onlyActiveOnIndex ...
- 试着用React写项目-利用styled-components解决样式问题
转载请注明出处:王亟亟的大牛之路 啰嗦之前先安利,会渐渐丰富前端的知识点 https://github.com/ddwhan0123/Useful-Open-Source-Android 昨天用web ...
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
转载请注明出处:王亟亟的大牛之路 这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source- ...
- 试着用React写项目-利用Webpack搭环境
转载请注明出处:王亟亟的大牛之路 最近都蛋疼,然后前些天开了个会就是关于"不加班就得死"的死命令,作为抵制加班的先头兵,我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了,就 ...
- React初步学习-利用React构建个人博客
React初步学习-利用React构建个人博客 用React和Webpack写了一个很简单的个人博客,主要是想要熟悉一下react中各种基本基本属性及方法的使用.在构建过程中碰到不少问题,通过阅读官方 ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- [转] 三步将你的 React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- React Native 项目整合 CodePush 全然指南
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...
随机推荐
- 常用的vue辅助工具vue-devtools
1,下载: https://github.com/datura-lj/vuedevtools 2,将下载好的文件拖到chrome拓展栏中(更多工具=>拓展程序): 3,修改计算机配置文件: wi ...
- Linux Netfilter注册钩子点
注册钩子点首先要包含响应的头文件,因为这应该已经属于对kernel的编程了. #include <linux/module.h> #include <linux/kernel.h&g ...
- 使用log4net记录日志到数据库(含有自定义属性)
记录日志是管理系统中对用户行为的一种监控与审核,asp.net中记录日志的方式有很多种,这里我只介绍一下最近用到的log4net,关于他的具体介绍网上有很多,我讲一下他的用法. 第一步:在配置文件中的 ...
- 2-sat(tarjan算法)hdu(1824)
hdu1824 Let's go home Time Limit: 10000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- using the library to generate a dynamic SELECT or DELETE statement mysqlbaits xml配置文件 与 sql构造器 对比
https://github.com/mybatis/mybatis-dynamic-sql MyBatis Dynamic SQL What Is This? This library is ...
- jquery ztree 刷新后记录折叠、展开状态
ztree :http://www.ztree.me/v3/main.php 项目中用到了这个插件,刚好也有需求 在页面刷新后,保存开始的展开.折叠状态, 其实 dtree: http://www.d ...
- Java 算法-快速幂
1 什么是快速幂? 快速幂,顾名思义就是快速的求次幂,例如:a^b,普通的算法就是累乘,这样的计算方法的时间复杂度就是O(n),而快速幂的方法使得次幂的计算方法的时间复杂度降低到O(logn). 假 ...
- django-mvc
而对于真实开发中的python web程序来说,一般会分为两部分:服务器程序和应用程序.服务器程序负责对socket服务器进行封装,并在请求到来时,对请求的各种数据进行整理.应用程序则负责具体的逻辑处 ...
- 洛谷P1373 小a和uim之大逃离 dp
正解:dp 解题报告: 传送门! 同样是看到列表发的题解就想着跟着做下dp的题目趴 然后发现还挺难的,,,反正我只大概想到怎么转移但是初始化什么的都不会TT 所以还是大概说下QAQ 首先可以想到设f[ ...