React路由点击跳转正常但刷新或手动输入URL时页面不渲染求助

这是BrowserRouter模式下单页应用的经典路由问题：通过Link跳转时由前端JS控制路由切换，不会向后端发送请求；但刷新或手动输入URL时，浏览器会直接向后端请求对应路径的资源，后端没有配置对应路径的返回规则，就会返回空内容或404，导致页面空白。另外类组件如果没有正确配置路由参数获取逻辑，也会出现刷新后接口请求失败的问题。

第一步：修正路径写法 #

所有Link跳转的路径统一使用绝对路径，避免相对路径的层级解析异常：

<Link to={`/article/${d.id}`}>Edit</Link> | 
<Link to={`/article/delete/${d.id}`}> Delete</Link>

第二步：检查类组件路由参数获取逻辑 #

如果你在Article组件中是通过this.props.match.params.id获取文章id的，需要给Article组件包裹withRouter高阶组件才能正确拿到路由参数，否则刷新后参数获取失败会导致接口请求异常：

// 在Article组件头部引入withRouter
import { withRouter } from 'react-router-dom'

// 把组件默认导出的写法修改为包裹高阶组件的形式
export default withRouter(Article)

第三步：本地开发环境修复 #

如果是本地开发阶段出现该问题，在项目根目录的package.json文件中添加配置项：

"homepage": "/"

重启开发服务即可生效。

第四步：生产部署环境修复 #

根据你使用的后端服务配置路由重定向规则，所有路由请求都 fallback 到项目入口的index.html：

• Nginx部署：在nginx配置文件的server块中添加如下配置

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

• Apache部署：在项目根目录新建.htaccess文件，写入如下内容

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

• Node.js Express后端部署：添加如下中间件

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

兜底替代方案 #

如果暂时无法修改后端配置，可以把BrowserRouter换成HashRouter，路径会自动加#前缀，所有路由都不会发送到后端，就能直接解决刷新空白的问题，修改app.js的路由引入即可：

// 把原来的 import { BrowserRouter as Router } from 'react-router-dom' 替换为
import { HashRouter as Router } from 'react-router-dom'

内容的提问来源于stack exchange，提问作者Dhruv Chopra