摘要
在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 80 default_server;
listen [::]:80 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;
}
}
原文地址：https://www.cnblogs.com/BlueBerryCode/p/12358140.html