使用react-router实现单页面应用路由

这是Webpack+React系列配置过程记录的第二篇。其他内容请参考:

本文接着介绍如何实现单页面应用。

实际上,单页面应用利用js实现了页面的动态化,用户使用时基本感知不到网页是如何实现的,开发也不应该让用户感知到。为了实现这一步,react提供了一个官方的路由组件react-router,让你的单页面应用支持页面的跳转以及动态渲染。

使用react-router的前端实现

安装react-router
npm install --save react-router-dom

我使用的是最新版本4.1.1,这个版本的react-router针对浏览器、原生应用等环境已经做了区分。我做的是基于web的单页面应用,因此安装的时候我使用的是react-router-dom这个依赖。

使用react-router

还是基于上一篇文章搭建的开发环境,我们使用官方示例简单入门对react-router的使用方法。

回顾一下上一篇文章的开发环境:

开发环境代码布局

这里主要需要修改index.js,其内容改为官方示例代码:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

ReactDOM.render(<BasicExample/>, document.getElementById('main'));

注意到上面的代码引入了react-router的BrowserRouter(重命名为Router),Route,Link三个组件。新版本的react-router提出了一切都以Component实现的原则,因此这些组件实际上都是React.Component的实现。

BrowserRouter是一个容器Component,其内部实现了路由跳转的逻辑。旧版本直接使用Router就可以,新版本根据环境不同有不同的实现,Web环境使用BrowserRouter。

Route也是一个Component,配置了页面路径以及当用户输入的路径命中时需要渲染的组件。

Link用于跳转,有点像HTML的a标签。不一样的是Link是需要在后端进行编译,最终可能以a标签的形式呈现给用户。

验证react-router

使用下面命令编译并运行应用:

npm run build
npm start

访问http://localhost:2000
可以看到页面已经可以正常访问,且点击可以实现页面跳转。

react-router效果

如果你细心一点,你会发现刚刚访问的页面链接是使用a标签出发了页面的跳转。但是跳转后页面并没有向后端发送页面请求。事实上,这就是单页面应用为了解耦前后端实现的目标之一。


Link在页面的呈现

我在index.js中使用Link组件,编译后在浏览器上以a标签呈现给用户。而react-router连接了这些a标签的事件处理,动态的实现组件的渲染和浏览器地址栏内容的修改。因此这个过程不需要重新加载内容也不会向后端发出网络请求。

使用react-router的后端实现

单页面是为了实现前后端的业务解耦,但绝对的解耦是不存在的。有两个方面佐证这个观点。首先是api协议的约定,这必须要前端与后端的同时支持;其次就是本文的主要内容——路由实现。

缺少后端支持的问题

通过上面内容我们知道单页面应用的路由是通过js实现的,相对于传统网站而言是“伪跳转”。那么如果用户直接在浏览器上输入http://localhost:2000/about
然后回车会有什么效果。

使用我的demo环境,会看到下图:


缺少后端支持的效果

果断的404响应。因为我的服务器根本没有/about这个目录或者文件。

增加后端支持

为了解决这个问题,我需要增加这样一个依赖:

npm install --save connect-history-api-fallback

并且在项目根目录的index.js(注意不是public目录的index.js,这里应该重新命名一下的,当前将就一下)。

内容改为:

var express = require('express');
var app = express();

app.use('/', require('connect-history-api-fallback')()); // Add
app.use('/', express.static('public'));

var server = app.listen(2000, function() {
  var port = server.address().port;
  console.log('Open http://localhost:%s', port);
});

另外需要修改一下public目录下的index.html文件的内容。这是使用相对路径获取js文件,属于上次留下来的bug,不改的话会存在问题。内容如下:

<html>
  <head>
  </head>
  <body>
    <p>Hello world</p>
    <div id='main'></div>
    <script src="/out.js"></script><!-- 改动行 -->
  </body>
</html>

这样就可以解决问题了。重新在浏览器输入http://localhost:2000/about
可以看到页面显示正常了。

需要注意增加的代码必须放在express.static行的上方。这涉及的express框架的原理,不在这里深究,只要知道connect-history-api-fallback组件根据配置,帮我们把public目录下的index.html作为所有不存在的路径的请求的响应返回给浏览器。

本文来自作者同步博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容