解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题
摘要
在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-center的真实URL路由。在实际项目中常常用真实的URL的方式,但是该形式存在一个隐藏的问题,就是项目打包后,浏览器页面刷新会出现404,为了解决这个问题,需要对服务器做简单的改动。
React路由应用真实URL
一、React路由变更
hash路由形式的URL代码如下:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter as Router } from "react-router-dom"; ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
hash路由会自带 # 号,我们需要去掉 # 号,将hash路由形式替换为browser路由形式,具体代码如下:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom"; ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
二、浏览器页面404解决
本地运行npm start后,URL为真实的URL,但是npm run build打包项目,上传项目到服务器后,实际项目页面出现404错误。当页面刷新时,浏览器会向服务器请求我们在服务器设置的默认URL,服务器实际会去找根目录下的build好的html文件,发现找不到,因为实际上我们的服务器并没有这样的物理路径/文件等,或者我们没有配置处理这个路由,所以内容无法显示,只有提示404错误。为了解决页面404的问题,我们只需要在服务器上配置处理URL,由于我使用的是nginx,故接下来就讲述如何去配置nginx。
三、Nginx服务器配置
配置nginx解决页面404错误,只需要访问任何路由地址都访问index.html,这样就可以自动被React-Router处理,并进行无刷新跳转。我们在nginx服务器的location中添加代码行 try_files $uri $uri/ /index.html 即可,部分配合代码如下:
server
{
listen default_server;
listen [::]: default_server; root /usr/local/react/build; //项目打包代码地址 # Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html; server_name example/test; //项目服务访问地址 location / {
try_files $uri $uri/ /index.html;
}
}
最新文章
- 关于SubSonic3.0插件使用SqlQuery或Select查询时产生的System.NullReferenceException异常修复
- iOS真机测试碰到错误linker command failed with exit code 1 (use -v to see invocation)
- SOAPUI使用教程-验证SOAP服务
- andorid SQLite数据库的增删改查 和事务操作
- 【MySQL】MySQL的group_concat使用例子
- day03 Java基础
- python(7)&ndash;类的多态实现
- linux查看服务器型号
- Subsequence(两个单调队列)
- ORACLE 热备begin backup / end backup
- UVa 136 - Ugly Numbers
- centos6.8 安装gitlab记录
- JSON 数据重复 出现$ref
- 周末班:Python基础之面向对象进阶
- scrapy-redis
- Linux基础学习(一)__后台运行Python文件
- iOS视频流开发(2)—视频播放
- python中简单的递归(断点报错的小福利)
- 【其他】【服务器】【2】把jar包做成服务,在Service中管理
- dubbo 框架和 tomcat 的比较
热门文章
- [bzoj1041] [洛谷P2508] [HAOI2008] 圆上的整点
- tensorflow框架
- 2015年3月26日 - Javascript MVC 框架DerbyJS DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用。
- 3分钟接入socket.io使用
- SqlServer 利用游标批量更新数据
- DNS隧道工具:iodine使用
- Codeforces Round #617 (Div. 3)F. Berland Beauty
- day04_IDEA、方法
- day03_流程控制语句
- 讲一下java,c语言,c+和c++都是干嘛的,他们运行的软件都是哪些