项目以react router实现,用ngnix做反向代理的时候出现404找不到页面,有两种解决方法。

第一种  将<Route path="*" component={NotFound} />对应的component改为<IndexRoute>对应的component,如下:

const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={Index}>
<IndexRoute component={DefaultPage}/>
<Route path="/lc" component={DefaultPage} />
<Route path="/Icon" component={Icon} />
<Route path="/ECharts" component={ECharts} />
<Route path="/page1" component={Page1} />
<Route path="/page3" component={Index} />
<Route path="/ruleJson" component={ruleJson} />
<Route path="/rules" component={rules} />
<Route path="/dataSource" component={DataSource}/>
<Route path="/viewTable" component={ViewTable}/>
<Route path="/sourceMatch" component={SourceMatch}/>
<Route path="/addMatchRules" component={AddMatchRules}/>
<Route path="seeMatchRules" component={SeeMatchRules}/>
<Route path="projectSourceUse" component={ProjectSourceUse}/>
<Route path="kafkaConfig" component={KafkaConfig}/>
<Route path="dataLocate" component={DataLocate}/>
<Route path="configurationEnvironment" component={ConfigurationEnvironment}/>
<Route path="mainframeInfo" component={MainframeInfo}/>
<Route path="resInfo" component={ResInfo}/>
<Route path="askForRes" component={AskForRes}/>
<Route path="releaseTask" component={ReleaseTask}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>

<Route path="*" component={DefaultPage} />

</Route>
</Router>

此时 Ngnix服务端配置如下

server {
listen 80;
server_name localhost;
proxy_redirect http://localhost:3083/ /;
#charset koi8-r;

#access_log logs/host.access.log main;

location / {
proxy_pass http://10.248.26.202;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /pt/ {
proxy_pass http://10.248.26.202:3083;
rewrite "^/pt(.*)$" $1 break;
}
location /help/ {
proxy_pass http://10.248.26.202/help;
}
location ~^/lc/ {
proxy_pass http://localhost:8080;
rewrite "^/lc(.*)$" $1 break;
}

}

此时代理成功 但是字体加载不到 根据404请求的地址所以添加一个字体的规则

location ^~/fonts/{
rewrite "^(.*)/fonts(.*)$" $1/lc/fonts$2;
}

第二种方法

在路由中添加一条与uri对应的路径指向首页 如下

const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={Index}>
<IndexRoute component={DefaultPage}/>
<Route path="/lc" component={DefaultPage} />
<Route path="/Icon" component={Icon} />
<Route path="/ECharts" component={ECharts} />
<Route path="/page1" component={Page1} />
<Route path="/page3" component={Index} />
<Route path="/ruleJson" component={ruleJson} />
<Route path="/rules" component={rules} />
<Route path="/dataSource" component={DataSource}/>
<Route path="/viewTable" component={ViewTable}/>
<Route path="/sourceMatch" component={SourceMatch}/>
<Route path="/addMatchRules" component={AddMatchRules}/>
<Route path="seeMatchRules" component={SeeMatchRules}/>
<Route path="projectSourceUse" component={ProjectSourceUse}/>
<Route path="kafkaConfig" component={KafkaConfig}/>
<Route path="dataLocate" component={DataLocate}/>
<Route path="configurationEnvironment" component={ConfigurationEnvironment}/>
<Route path="mainframeInfo" component={MainframeInfo}/>
<Route path="resInfo" component={ResInfo}/>
<Route path="askForRes" component={AskForRes}/>
<Route path="releaseTask" component={ReleaseTask}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="taskList" component={TaskList}/>
<Route path="*" component={DefaultPage} />
</Route>

</Router>

此时ngnix服务器端的配置如下

server {
listen 80;
server_name localhost;
proxy_redirect http://localhost:3083/ /;
#charset koi8-r;

#access_log logs/host.access.log main;

location / {
proxy_pass http://10.248.26.202;
}

location /pt/ {
proxy_pass http://10.248.26.202:3083;
rewrite "^/pt(.*)$" $1 break;
}

location /help/ {
proxy_pass http://10.248.26.202/help;
}
location ~^/lc/ {
proxy_pass http://localhost:8080;
rewrite "^/lc(.*)$" $1 break;
}

Ngnix反向代理react-router配置问题解决方法的更多相关文章

  1. [跨域]跨域解决方法之Ngnix反向代理

    跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代 ...

  2. 正向代理 forward proxy、反向代理 reverse proxy、透明代理 transparent proxy nginx反向代理原理和配置讲解 防止外部客户机获取内部内容服务器的重定向 URL 缓存命中

    [大型网站技术实践]初级篇:借助Nginx搭建反向代理服务器 - Edison Chou - 博客园http://www.cnblogs.com/edisonchou/p/4126742.html 图 ...

  3. Nginx反向代理负载均衡配置

    1.反向代理概述 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求 ...

  4. Nginx反向代理讲解和配置

    首先来介绍下Nginx的反向代理.代理服务器一般分为正向代理(通常直接称为代理服务器)和反向代理. 画个图我们就好理解了. 正向代理:可以想象成是路由器,我们要通过它来上网的那种.(可以说是客户端的代 ...

  5. ngnix 反向代理

    1       课程目标 掌握nginx+tomcat反向代理的使用方法. 掌握nginx作为负载均衡器的使用方法. 掌握nginx实现web缓存方法. 2       nginx介绍 2.1    ...

  6. Nginx实战之反向代理WebSocket的配置实例

    http://www.jb51.net/article/112183.htm 最近在工作中遇到一个需求,需要使用 nginx 反向代理websocket,经过查找一番资料,目前已经测试通过,所以这篇文 ...

  7. Nginx反向代理的基本配置

    (1)proxy_pass 语法:proxy_pass URL; 配置块:location.if 此配置项将当前请求反向代理到URL参数指定的服务器上,URL可以是主机名或IP地址加端口的形式,例如: ...

  8. Linux 下 Nginx 反向代理 负载均衡配置

    转载请注明出处:http://blog.csdn.net/smartbetter/article/details/52036350 上一篇分享了 Nginx + JDK + Tomcat + MySQ ...

  9. nginx反向代理做cache配置

    前序:请耐性子看完,前面的这个配置可以达到按后缀名进行缓存,但无法被purge.后面的配置可以被purge.具体实施方案按个人情况而定. 需要第三方的ngx_cache_purge模块:wget ht ...

随机推荐

  1. 分析案例:应用服务无响应,任务管理器中发现大量w3wp僵尸进程----等待异构系统WebService返回值

    问题描述:       某二次开发的项目反馈,不定期出现应用服务器无响应的情况,登录服务器发现任务管理器中有大量的w3wp僵尸进程. 分析过程: 针对同一进程每隔15秒抓取dump,连续抓取3个,对比 ...

  2. chp-adapter 文件结构

    1.需要接口给chp推送数据的Bean,写到/chp-adapter/src/main/java/com/creditharmony/adapter/service 文件夹中,并添加父类,供chp业务 ...

  3. [转载]jQuery1.9完全删除live事件

    其实关于live被删除的事件早就在1.7.2版本以后就有通知过了 不过在官方一直提倡使用.on代替.live的过程中 .live事件一直沿用 今天更新了 看下jQuery1.9的相关信息 发现api中 ...

  4. 安装Oracle报错,全部为未知!

    安装Oracle一开始就报错:需要将以下日志文件发送给管理员,<未知><未知><未知>. 这种问题需要对oracle的setup.exe设置 兼容性.具体如下图:

  5. mfc release 版本 内存不足 的解决方法

  6. 解决java compiler level does not match the version of the installed java project facet

    在项目目录的.setting文件夹下的org.eclipse.wst.common.project.facet.core.xml中 <installed facet="java&quo ...

  7. 那些年蹚过的坑(c++)

    1 main中的参数 尽量用英文双引号括起来,否则可能会出现字符串截断的情况(linux gcc 4.4 不加英文引号的话,遇到英文;会丢弃;后面的部分) 2 包含ipv6地址结构体(in6_addr ...

  8. XML中& <> 单引号' 双引号 " 报错

    由于xml中 这些字符是特殊字符,所以把&改成&  就行了 ,注意后面一定要带一个分号; <         <         小于号>         >  ...

  9. [SQL]Sql转至问题

    HRMS Name InsuranceMoney InsuranceName -------------------- -------------------- ------------------- ...

  10. 数据结构与算法(1)支线任务4——Lowest Common Ancestor of a Binary Tree

    题目如下:https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-tree/ Given a binary tree, fin ...