现在用react写单页应用基本上都是用react-router做前端路由了吧!最近在使用react-router的过程中遇到了不少问题,在这里总结一下。

浏览器url

react-router默认提供的history是 createHashHistory ,即它用到的是 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由,所以你会看到url多了类似 _key=s1gvrm  的 query,这真的很难看。而且这也不是官方在实际生产应用中所推荐的。要改变这种情况的话,我们需要去使用 createBrowserHistory ,在我们的代码中引入history,并在Router组件处调用 createBrowserHistory  方法即可。

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import createBrowserHistory from "history/lib/createBrowserHistory"
  4. import { Router,Route,Link,browserHistory,IndexRoute,IndexLink } from "react-router";
  5.  
  6. class App extends React.Component{
  7.  
  8. render(){
  9. return(
  10. ...
  11. );
  12. }
  13. };
  14.  
  15. ReactDOM.render((
  16. <Router history={ createBrowserHistory() }>
  17. ...
  18. </Router>
  19. ),document.getElementById("app"));

其实关于url还有许多的细节,因为react-router本身就是构建于history之上的。单页应用的url只不过是针对于react- router的一个标示而已,界面间的跳转全然由react-router决定,react-router检查当前url随后渲染匹配的路由组件,因为是前端路由,所以如果直接在浏览器上输入相对应的组件url,而后端却不对此url做任何的匹配的话,可能会得到404响应。

组件通信

这是一个用react写代码永远都绕不开的话题。react-router是基于react开发的,所以它的每一个route都是一个组件。路由组件间的通信一般借由Link来实现,而根据路由参数的不同,还可以分成两种。这个很容易理解,因为这两种方式和我们平时写的后台路由并没有什么太大差别。

1 param,param通过/:param的方式传递。

比如说我们现在有一个显示消息列表的路由组件,我们需要在点击每一个消息的时候能跳转到显示被点击消息详情的路由组件。这个时候我们消息详情路由组件可以是这样定义的:

  1. <Route path="News_detail/:news_id" component={ news_detail }/>

在消息列表路由组件那里我们让每一条消息都是这样的一个Link:

  1. <Link to={ `News_detail/${ element.timestamp }` } >{ element.news }</Link>

这样的话我们的消息详情组件就能通过  this.props.params 获取到消息列表组件传递而来的  element.timestamp 参数了。

2 query

  1. <Link to="/Activity_Publish" query={{ timestamp : element.timestamp }}>编辑</Link>

在  /Activity_Publish 映射的路由组件里面可以通过

  1. var { query } = this.props.location;
  2. var timestamp = query.timestamp;

获取到query参数。

相对于param,局限性更小,你可以根据需要传递更多的参数,只不过有点类似于get请求,传递的参数会附带在url后面,看起来有点丑,而且几乎无隐蔽性可言。

3 state

这种方式借助了location 对象,location 对象可以简单的认为是 url 的对象形式表示,这里要提的是 location.state,每个 URL 都会对应一个 state 对象,你可以在对象里存储数据,但这个数据却不会出现在 url 中。实际上,数据被存在了 sessionStorage 中,旧的路由组件可以借助这种方式传递数据给新的路由组件,但是会有个问题就是,新的路由组件虽然在首次被渲染的时候可以成功拿到数据,但是如果此时浏览器被刷新的话,传递过来的数据也会消失。

  1. <Link to="/Activity_Publish" state={{ timestamp : element.timestamp }}>编辑</Link>

按需加载

react-router协同webpack的使用可以实现组件的按需加载,而且 这种按需加载完全是异步的,这点特别酷炫,你不再需要一口气加载那么大的js文件,即使里面包含着许多用户甚至都不会使用到的web组件。你可以只根据需 要加载用户浏览的那些组件,这个举措将会帮你大大的降低首屏渲染的时间。

实现这个功能很简单,比如在一开始你的路由是这样子的:

  1. ...
  2. import News_detail from "./marriage_component/activity/news_detail.jsx";
  3. ...
  4.  
  5. class App extends React.Component{
  6.  
  7. render(){
  8. ...
  9. }
  10. };
  11.  
  12. ReactDOM.render((
  13. <Router history={ createBrowserHistory() }>
  14. <Route path="/marriage_app" component={ App }>
  15. ...
  16. <Route path="/marriage_app/News_detail/:news_id" component={ News_detail }/>
  17. ...

把它改成这样就行了:

  1. ...
  2. //import News_detail from "./marriage_component/activity/news_detail.jsx";
  3. ...
  4.  
  5. class App extends React.Component{
  6.  
  7. render(){
  8. ...
  9. }
  10. };
  11.  
  12. ReactDOM.render((
  13. <Router history={ createBrowserHistory() }>
  14. <Route path="/marriage_app" component={ App }>
  15. ...
  16. <Route path="/marriage_app/News_detail/:news_id" getComponent={ (nextState, callback) =>{
  17. require.ensure( [ ], (require) => {
  18. callback(null, require("./marriage_component/activity/news_detail").default)
  19. }) } }/>
  20. ...

一开始的组件不再需要被导入,webpack会帮你在需要的时候引入它。

最后

这种前后端分离的模式真的很赞,但似乎对SEO并不是很友好。如果真的需要SEO,又追求于实现前后端的真正解耦,是不是以Nodejs为中间层的架构模式会成为一种解决方案呢?

记、基于react-router的单页应用的更多相关文章

  1. 基于VUE的SPA单页应用开发-加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  2. 基于jQuery/zepto的单页应用(SPA)搭建方案

    这里介绍一个基于jquery或zepto的单页面应用方案,遵循尽可能简单的原则,使大家一目了然,只需配置一个路由,之后完全按照jq日常写法即可完成.可做学习使用,也可修改后用于一些业务逻辑简单的spa ...

  3. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  4. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  5. 单页应用后退不刷新方案(vue & react)

    引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...

  6. 基于React和Node.JS的表单录入系统的设计与实现

    一.写在前面 这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景 人活着一定要有信仰,没有 ...

  7. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  8. Node.js + React + MongoDB 实现 TodoList 单页应用

    之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...

  9. React + Node 单页应用「二」OAuth 2.0 授权认证 & GitHub 授权实践

    关于项目 项目地址 预览地址 记录最近做的一个 demo,前端使用 React,用 React Router 实现前端路由,Koa 2 搭建 API Server, 最后通过 Nginx 做请求转发. ...

随机推荐

  1. 编写一个Java应用程序,该应用程序包括2个类:Print类和主类E。Print 类里有一个方法output()功能是输出100 ~ 999之间的所有水仙花数(各位数字的 立方和等于这个三位数本身,如: 371 = 33 + 73 + 13。)在主类E的main方法中来 测试类Print

    package zuoye; public class print { void output() { System.out.println("100-999之间的水仙花数是:") ...

  2. SQLServer修改字段类型

    Alter table [表名] Alter column [列名] [列类型]

  3. Vim指令备忘

    从网上找来的记忆图,适合于刚上手的童鞋形象记忆. 接下来的是个人在使用过程中容易忘记的命令,特此备份查看. n<space> 会向右移动这一行的n 个字元 n<Enter> 向 ...

  4. linux清理内存命令

    1.清理前内存使用情况 free -m 2.开始清理  echo 1 > /proc/sys/vm/drop_caches3.清理后内存使用情况 free -m4.完成! 查看内存条数命令: # ...

  5. x01.Lab.StreetApp: MVVM

    Store App 特别适用于 MVVM 模式.由于要用到 SQLite,Bing Maps,所以第一步从网上搜索并安装这两个扩展.很难想象在智能手机上运行 SQL Server 这种巨无霸型数据库, ...

  6. bootstrap简单的过一遍

    注:.xxxx 表示类(class=xxxx) <h1>到<h6>均可使用.另外还提供了.h1到.h6的class .lead可以让段落突出显示 <small>  ...

  7. 嵌入式Linux开发板

    嵌入式Linux开发板开发介绍: iTOP-4412嵌入式Linux开发板搭载三星Exynos四核处理器,配备1GB内存,4GB固态硬盘EMMC存储,独家配备三星S5M8767电源管理,配备Andro ...

  8. 清除MAC OS X上的流氓软件 - advance mac cleaner

    自3721开天辟地以来,流氓软件从来就没有消停过,连MAC OS X都难逃流氓软件的骚扰. 近日,因为从SourceForge上下载了一个软件安装包,结果中招了——莫名其妙被安装了advance ma ...

  9. input文本框和img验证码对齐问题

    左边放input,右边img验证码,然后一直不能对齐,如图: img老是比input高出一个头,然后调的头都大了还是不行,照例百度之, 给input和img都加一个 vertical-align:mi ...

  10. ExtJs4 笔记(14) layout 布局

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...