BrowserRoute服务器配置

在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是:

1)hashHistory

2)browserHistory

3)createMemoryHistory

hashHistory 使用 URL 中的 hash(#)部分去创建形如 example.com/#/some/path 的路由。

browserHistory是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL,创建一个像example.com/list/123这样真实的 URL 。

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory} from 'react-router';

import Index from "../routes/HelloWorld";
import List from "../routes/BlogList";
import About from "../routes/About";

class App extends React.Component {
    render() {
        return (
            <div>
                <ul>
                  <li><IndexLink to="/">首页</IndexLink></li>
                  <li><Link to="/list">List</Link></li>
                  <li><Link to="/about">About</Link></li>
                </ul>
                {this.props.children}
            </div>
        );
    }
}

ReactDOM.render(
    <Router history = {browserHistory}>
        <Route path="/" component={App}>
          <IndexRoute component={Index}/>
          <Route path="list" component={List}/>
          <Route path="about" component={About}/>
        </Route>
    </Router>,
    document.getElementById("APP")
);

但是我们当我们采用browserHistory方案时,通常会遇到浏览器刷新404 的问题。

一、问题描述

在React + React-router实现的SPA(单页面应用)项目中,当我们路由模式采用browserHistory时,点击每个导航都可以显示正确的页面,一旦浏览器刷新,页面就显示Cannot GET(404)。

如当我们点击List链接,进入List页面之后,正常显示List页面内容,这时如果我们刷新页面,页面将会出错,返回Cannot GET /list

二、问题分析

当刷新页面时,浏览器会向服务器请求example.com/list,服务器实际会去找根目录下list.html这个文件,发现找不到,因为实际上我们的服务器并没有这样的 物理路径/文件 或没有配置处理这个路由,所有内容都是通过React-Router去渲染React组件,自然会报404错误。这种情况我们可以通过配置Nginx或通过自建Node服务器来解决。

三、Nginx方式

采用Nginx方案需要先将所有资源打包生成到对应的目录,比如dist,然后做如下配置:

server {
    server_name react.thinktxt.com;
    listen 80;

    root /Users/txBoy/WEB-Project/React-Demo/dist;
    index index.html;
    location / {
        try_files $uri /index.html;
      }
}

通过配置Nginx,访问任何URI都指向index.html,浏览器上的path,会自动被React-router处理,进行无刷新跳转。

四、通过修改webpack-dev-server运行方式

这个解决方法很简单,直接在运行时加入参数“–history-api-fallback”就可以了。我们修改package.json相关的代码:

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server  --inline --devtool eval --progress --colors --hot --content-base ./build --history-api-fallback"
},

五、Node服务端配置

一个express应用的配置示例:

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

//加载指定目录静态资源
app.use(express.static(__dirname + '/dist'))

//配置任何请求都转到index.html,而index.html会根据React-Router规则去匹配任何一个route
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})

app.listen(port, function () {
  console.log("server started on port " + port)
})

一个Koa应用的配置示例:

import Koa from 'koa';
import xtpl from 'koa-xtpl';
import path from 'path';

const app = new Koa();
const port = process.env.PORT || 8081;

app.use(xtpl({
    root: path.resolve(__dirname, '../dist'),
    extname: 'html',
    commands: {}
}));

app.use(async(ctx, next) => {
    await ctx.render('index', {});
});

app.listen(port, () => {
    console.log('Server started on port' + port);
});

注意: 由于koa的这种方式端口与webpack-dev-server(8080)必须不同,所以还需要配合Nginx代理。例如:

server {
    server_name react.thinktxt.com;
    listen 80;

    location / {
        proxy_pass http://localhost:8081;
    }
}

server {
    server_name static.react.thinktxt.com;
    listen 80;

    location / {
        proxy_pass http://localhost:8080;
    }
}

既然我们的Nginx代理用了真实域名,自然别忘了修改一下host,如下:

127.0.0.1 react.thinktxt.com
127.0.0.1 static.react.thinktxt.com

这样我们就大功告成了,可以happy的在地址栏直接访问任何采用browserHistory方式配置的路由页面了。

BrowserRoute服务器配置的更多相关文章

  1. Linux服务器配置之加载硬盘

    Linux服务器配置之加载硬盘 1.修改密码 passwd 2.测试密码是否成功 3.查看硬盘信息 fdisk –l 4.格式化分区 fdisk /dev/vdb 5.查看分区 6.快速格式化/dev ...

  2. Windows Server 2008 R2 WEB服务器配置系列文章索引

    最近这段时间趁天翼云1元主机活动,购买了一个1元主机,主要是为了写一些服务器配置的教程. 已经完成如下几篇文章,送给大家. 国内云主机比较 天翼云/阿里云/腾讯云 Windows Server 200 ...

  3. Window下python2.7+Apache+mod_wsgi+Django服务器配置

    前言:试着使用python搭建一个网页,分别在windows下和linux下,本篇文章主要讲解Window下python+Apache+mod_wsgi+Django服务器配置过程中遇见的问题和解决方 ...

  4. Samba服务器配置

    Samba服务器配置流程: (1)安装samba服务器先用#rpm -ivh samba-列出与samba有关的rpm包然后选择第一个包,用tab键补齐文件名 (2)创建新用户和其密码#useradd ...

  5. 【原创】我所理解的自动更新-外网web服务器配置

    ClientDownload和ClientUpdate共享渠道配置信息: channel-0.php //以appstore的渠道为例 <?php define('APPNAME', 'TOKE ...

  6. iOS app 企业内部发布及HTTPS服务器配置

    转自: http://www.cnblogs.com/cocoajin/p/4082488.html iOS企业内部发布及HTTPS服务器配置 一:所需的条件 1. 苹果开发者证书,企业版 299$ ...

  7. django服务器配置

    服务器配置是Ubuntu14.04 64位OS ubuntu14.04默认是安装好了python2.7版本不用自己安装了. 先更新下源 sudo apt-get update 第一步先安装pip su ...

  8. &quot;错误消息 401.2。: 未经授权: 服务器配置导致登录失败。&quot;的解决办法

    [详细报错如下]: “/”应用程序中的服务器错误. 访问被拒绝. 说明: 访问服务此请求所需的资源时出错.服务器可能未配置为访问所请求的 URL. 错误消息 401.2.: 未经授权: 服务器配置导致 ...

  9. VS2012 asp.net mvc 4 运行项目提示:&quot;错误消息 401.2。: 未经授权: 服务器配置导致登录失败&quot;

    创建mvc4 应用程序发布,运行出错.出现未经授权: 服务器配置导致登录失败.请验证您是否有权基于您提供的凭,后来找得解决方法: 打开点站的web.confg文件,将: <authorizati ...

随机推荐

  1. jQuery基础,定时器,工厂函数

    这个星期刚刚学的JQuery,下面我来说说我学的这几个例子 jQuery是JavaScript的一个程序库. Jquery的工厂函数$(): 在Jquery中 $符号等价于jquery,作用是将DOM ...

  2. c# webapi发布到windows server 2008 r2 iis上提示404错误

    项目服务端是一组RestFul风格的webapi,发布到本机的iis没有问题,但是发布到服务器以后就提示404错误.本机是win10的,服务器是windows server 2008 R2 64位.之 ...

  3. Linux Shell脚本实现根据进程名杀死进程

    Shell脚本源码如下: #!/bin/sh #根据进程名杀死进程 if [ $# -lt 1 ] then echo "缺少参数:procedure_name" exit 1 f ...

  4. POJ 1696 Space Ant --枚举,模拟,贪心,几何

    题意: 有很多点,从最右下角的点开始走起,初始方向水平向右,然后以后每步只能向左边走,问最多能走多少个点. 解法: 贪心的搞的话,肯定每次选左边的与它夹角最小的点,然后走过去. 然后就是相当于模拟地去 ...

  5. MathType 常用快捷键

    MathType 数学公式编辑器是广大理科生电脑上必不可少的软件!然而在大量公式时,不会巧妙使用快捷键真的是心累身累.巧妙使用MathType数学公式编辑器可加快数学符号的录入速度和效率,这将节约大量 ...

  6. java中volatile关键字的含义 (转载)

    在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...

  7. smarty 截取字符串,调用php中的方法,foreach循环

    1.smarty截取字符串       html中的代码    <{$content|truncate:30:"..."}>                       ...

  8. java 数组的冒泡排序

    冒泡排序 (1)冒泡排序算法的运作如下:(从后往前) 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最 ...

  9. 搭建 Jest+ Enzyme 测试环境

    1.为什么要使用单元测试工具? 因为代码之间的相互调用关系,又希望测试过程单元相互独立,又能正常运行,这就需要我们对被测函数的依赖函数和环境进行mock,在测试数据输入.测试执行和测试结果检查方面存在 ...

  10. 朱晔的互联网架构实践心得S1E2:屡试不爽的架构三马车

    朱晔的互联网架构实践心得S1E2:屡试不爽的架构三马车 [下载本文PDF进行阅读] 这里所说的三架马车是指微服务.消息队列和定时任务.如下图所示,这里是一个三驾马车共同驱动的一个立体的互联网项目的架构 ...