解决react-router4在browserhistory路由下的nginx的白屏或者404问题

　使用react-router，官方推荐用browserhistory，美观简洁。但是nginx服务器端的配置也让人头疼。

首先看官方举例的方法：

server {location / {try_files $uri /index.html}
}

这个做法问题在于，你必须把你的react应用放到根路径下，且这个nginx只为这个一个应用服务。这样是不是有点浪费资源了？

假如我路径是 www.xxx.com.cn/h5/v1/getView,按照官方的nginx配置，那么就得这么写

server {location / {root /home/h5/v1;try_files $uri $uri/ /index.html; } }

这样配置没问题，但是你如果想再这个nginx部署其他的web应用，那么目录路径问题就让人尴尬了。

下面有另外一种方式：

server {location /h5 {root /home;try_files $uri $uri/ /h5/v1/index.html;}
}

这里的try_files配置值有3项，我们只需要关注最后一项，也就是说，在www.xxx.com.cn/h5/v1/getView访问这个请求的时候，

会到nginx服务器上，最后会查到 /home 跟 / h5/v1/index.html这个两个路径拼接后的所在的资源。

这么写了后，页面就不会报404的错误了。如果页面还是空白，说明在你react-router路由写的有问题。

问题代码如下：

1 const RouterComponents = () => (
2     <Switch>
3       <Route exact path='/' component={App} />
4       <Route path="/getView" component={getView}/>
5     </Switch>
6   )

正确的代码应该是写完整路径，类似下面的：

1 const RouterComponents = () => (
2     <Switch>
3       <Route exact path='/' component={App} />
4       <Route path="/h5/v1/modifypassword" component={getView}/>
5     </Switch>
6   )

最后，上述代码很不美观，你可以考虑用react-router4 的basename 属性，以及ES6的模板字符串来拼接，怎么美观怎么处理。

var react-router-prefix = '/h5/v1/';<Router path=`${react-router-prefix}getView`/>

转载于:https://www.cnblogs.com/ldld/p/8483772.html

解决react-router4在browserhistory路由下的nginx的白屏或者404问题相关推荐

WordPress网站出现白屏解决办法
WordPress网站白屏是最常见的WordPress错误之一,因为网站白屏,我们无法看到错误信息. WordPress网站白屏有时只会影响网站的某个部分.例如,只在WordPress管理后台看到白屏 ...
Android 冷启动解决启动白屏
前言关于 splash 页面相信每个Android开发者都是非常熟悉的,而且很多人也遇到过需要在splash加个广告图片,然后延迟3秒在进入主页面,splash 应该只是一个启动页面,不应该放广告, ...
逆水寒服务器为响应,逆水寒白屏未响应怎么办逆水寒白屏未响应解决办法
导读小编之前和大家分享了关于<逆水寒>出现黑屏但有声音的解决办法,今天再来和大家一起分享一下关于很家同样都会遇到的白屏未响应的解决办法,感兴趣的可以一起来了解一下! <逆水寒&g ...
解决React中input输入框在中文输入法下的bug
解决React 中input 输入框在中文输入法下的bug 需求:封装Input 组件,输入拼音过程中不触发onChange,拼音输入结束后触发onChange 原理:input 标签上面有两个事件, ...
Windows下的Nginx部署React项目及解决反向代理跨域问题等-20.8.1更新
文章目录 1. 概述 2. 优点 3. 为什么选择Nginx 4. 下载 5. 安装 6. 配置参数详细说明 7. 命令行参数 7.1 启动nginx 7.2 重启nginx--重新加载配置 7.3 ...
React+DvaJS 之 hook 路由权限控制
博客学院下载 GitChat TinyMind 论坛 APP 问答商城 VIP 活动招聘 ITeye 写博客发Chat 登录注册原 React+DvaJS 之 hook 路由权限控制 20 ...
kuayu react_多种解决react中跨域问题方案
多种解决react中跨域问题方案在网上看到了多种解决react跨域的方法,但是在实际的项目中并不是所有的方法都是可行的. 一.最简单的操作在package.json中加入 "proxy& ...
为了解决伴随RIP协议的路由环路问题，可以采用水平分割法，这种方法的核心是（22），而反向毒化方法则是（23）。
为了解决伴随RIP协议的路由环路问题,可以采用水平分割法,这种方法的核心是(22),而反向毒化方法则是(23). (22) A.把网络水平地分割为多个网段,网段之间通过指定路由器发布路由信息 B.一条 ...
python组件的react实现_React-Router动态路由设计最佳实践
写在前面随着单页应用(SPA)概念的日趋火热,React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系,其中路由模块便是非常重要的一个组成部分.它承载着应用功能分区,复杂模块组织, ...

解决react-router4在browserhistory路由下的nginx的白屏或者404问题

解决react-router4在browserhistory路由下的nginx的白屏或者404问题相关推荐

最新文章

热门文章