React 使用browserHistory项目访问404问题
最近项目里面用到了React但是发布到iis站点之后,路由地址 刷新访问直接404错误。查阅资料之后发现是iis缺少配置URL重写 的问题导致的。下面我们来图形化配置,简单的配置下IIS
打开IIS使用 Web平台安装程序
搜索url
关键字,您会看到
直接安装
关掉IIS 重新打开IIS在站点右边的控制面板可以看到一个URL重写的功能
新增配置如下
也可以直接 使用我的配置
配置如下 关键节点是:rewrite
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter" patternSyntax="ECMAScript" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{HTTP_METHOD}" pattern="^GET$" />
<add input="{HTTP_ACCEPT}" pattern="^text/html" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
附:其他http-server配置说明
Nginx
server {
server_name react.yahui.wang
listen 80;
root /wwwroot/ReactDemo/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}
Tomcat
找到conf目录下的web.xml文件,然后加上一句话让他定位回来
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
Apache
.htaccess
文件配置如下
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
转载请注明出处 http://blog.yahui.wang/2018/05/18/React-Router-browserHistory-IIS/
React 使用browserHistory项目访问404问题的更多相关文章
- idea启动springboot+jsp项目出现404
场景:用IntelliJ IDEA 启动 springBoot项目访问出现404,很皮,因为我用eclipse开发时都是正常的,找了很久,什么加注释掉<scope>provided< ...
- .net MVC 访问404
MVC 项目访问总是404 有几种情况: 1 地址打错了. 2 controller/action 但是action方法含有[ActionName("Index")] 重命名了. ...
- IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404
IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404 .embody{ padding:10px 10px 10px; margin:0 -20px; borde ...
- react axios 跨域访问一个或多个域名
1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...
- nginx反向代理部署springboot项目报404无法加载静态资源
问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...
- web理论知识--网页访问过程(附有Django的web项目访问流程)
当我们闲暇之余想上网看看新闻,或者看个电影,通常的操作是:打开电脑.打开浏览器.输入网址.浏览页面信息.点击自己感兴趣的连接......那么有没有想过,这些网页从哪里来的?过程中计算机又做了什么事情了 ...
- React脚手架创建一个React应用以及项目目录结构详解
react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...
- tomcat部署项目访问不加项目名方法
直接主题:tomcat部署项目访问不加项目名方法是打开tomcat的conf目录下server.xml文件 加入 <Context path="" docBase=" ...
- django之创建第4-3个项目-访问list数据
1.index <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
随机推荐
- Vue.js:自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
- 支付宝pc端支付接入PHP实现
引入支付宝接口 放入一个插件库中,方便管理 创建支付类 1.发起支付 public function init() { $order_id = $_REQUEST['order_id']; $orde ...
- C#简单操作app.config文件
即将操作的app.config文件内容如下 <?xml version="1.0" encoding="utf-8"?> <configura ...
- Windows访问Linux下的共享目录的配置方法
user安全级别 第一步:安装samba3(如果已经安装就跳过这一步) [root@rhce2 /]# yum groupinstall "CIFS file server" 第 ...
- Python函数式编程之map()
Python函数式编程之map() Python中map().filter().reduce()这三个都是应用于序列的内置函数. 格式: map(func, seq1[, seq2,…]) 第一个参数 ...
- 【HDU3949】XOR
[题目大意] 给定一个数组,求这些数组通过异或能得到的数中的第k小是多少. 传送门:http://vjudge.net/problem/HDU-3949 [题解] 首先高斯消元求出线性基,然后将k按照 ...
- tomcat在linux服务器上部署应用
连接服务器 服务器地址:xxx.xxx.xxx.xxx 用户名:xxxx 密码:xxxx 进入到服务器中的tomcat路径,关闭服务器,例如 路径:/opt/wzgcyth/apache-tomcat ...
- solidity错误处理
官方文档: https://solidity.readthedocs.io/en/develop/control-structures.html#error-handling-assert-requi ...
- CSS--抽屉(dig.chouti.com)页面
一.设置整体页面宽度 一般写个样式命名为.d{}设置整体页面指定宽度和居中,京东命名为.w{},bootstrap里命名为.container{} 1 2 3 4 5 6 7 8 9 10 11 12 ...
- 3.Dynamic Layout 动态布局。在槽中处理布局
在应用程序中,一个界面的布局基本都是固定的. 在这个实例中,我们把管理布局的代码放在槽中.这样点击一次按钮,触发槽.布局改变一次.这样就成为一个动态布局. (一) 水平和竖直布局改变 横向: 纵向: ...