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. 【翻译】如何在AJAX生成的内容中再次运行Prism.js

    一.前言 最近用一个十分轻量级的网页代码高亮Js库,应用到项目中发现了一个问题,对于静态的已经写好的代码,Prism的高亮插件是没有问题的,但是通过Ajax异步获取数据并修改DOM时发现,Prism高 ...

  2. Qt控件样式 Style Sheet Demo

    迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使 ...

  3. lua upvalue

    转自http://blog.chinaunix.net/uid-52437-id-2108789.html Lua 中的函数是一阶类型值(first-class value),定义函数就象创建普通类型 ...

  4. centos6关闭ipv6

    Install packages for CentOS 6.0 Minimal cat <<EOF>>/etc/modprobe.d/disable_ipv6.conf ali ...

  5. php的查询数据

    php中 连接数据库,通过表格形式输出,查询数据.全选时,下面的分选项都选中;子选项取消一个时,全选按钮也取消选中. <!DOCTYPE html PUBLIC "-//W3C//DT ...

  6. [JavaScript] 判断键盘同时按某些键时执行操作。

    前言:之前知乎上看到过一个介绍国外炫酷网站的,其中一个敏感网站用同时按住"q.a.p.l" 才能观看视频 放手则立即强制停止 (手动斜眼).这个功能的实际用处,我认为是可以在做一些 ...

  7. nginx.exe启动错误:bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)

    启动nginx.ese之后 nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a soc ...

  8. 用SQL快速删除U8账套

    一.问题提出 通过"系统管理"来删除999账套,首先要求你备份然后才能删除.头痛的是: 1)备份需要发费很长的时间,特别是账套数据文件比较大时. 2)备份时,你的本本基本处于死机状 ...

  9. Spring5源码解析-Spring框架中的单例和原型bean

    Spring5源码解析-Spring框架中的单例和原型bean 最近一直有问我单例和原型bean的一些原理性问题,这里就开一篇来说说的 通过Spring中的依赖注入极大方便了我们的开发.在xml通过& ...

  10. JAVA声明一个对象数组

    Student stu[]=new Student[N]; Student stu={new Student(),~~~}; JAVA类型转换 String转为float String转为INT