由于公司需要将项目部署到二级域名下，并且将项目原来的hash路由改成browser路由，对遇到的问题进行一次记录，方便遇到同样问题的小伙伴可以查阅。

hash转browser

这一步还是比较简单的，由于项目是umi3搭建的，只需要在umirc里配置history的type属性为browser就可以了

history: {type: 'browser'}

使用cra脚手架的可以从 React Router 中引入

import { browserHistory } from 'react-router'

然后将它们传递给<Router>:

render(<Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)

配置basename（部署到二级域名下才需要)

umi 可以直接在umirc里配置base属性 默认值是/,比如部署到服务器的/test目录 base配置为 base: '/test'

cra可以给<Router>设置 basename 属性 <Router basename="/test">

类似base标签，让路由知道跳转时的基准路径

配置静态文件路径 publicPath（部署到二级域名下才需要)

umi 可以直接配置 publicPath

开发环境使用/ 其他打包到/test/目录下

publicPath: NODE_ENV === 'development' ? '/' : '/test/',

cra 可以修改一下webpack output.publicPath

最后找运维修改nginx 做重定向配置（$try_files）

// 主域名项目
location / {
  try_files $uri $uri/ /index.html;
}
// 二级域名项目
location /test {
  try_files $uri $uri/ /test/index.html;
}
// 二级域名项目
location /test2 {
  try_files $uri $uri/ /test2/index.html;
}