React Route部署到cpanel后不渲染返回404问题求助

问题核心原因 #

该问题本质是SPA客户端路由与服务端路由逻辑不匹配：

• 本地开发环境的webpack-dev-server默认配置了请求 fallback 规则，所有请求统一返回入口index.html，BrowserRouter可正常解析路由
• Cpanel默认使用Apache服务，当用户直接访问/gallery或刷新该页面时，服务端会尝试查找服务器上真实存在的gallery文件/目录，找不到就返回404
• 目前使用history.push的临时方案仅能解决站内点击跳转的场景，用户手动输入地址、刷新子路由页面时仍会触发404

最优解决方案（无需额外搭建Node/Express服务） #

仅需在Cpanel的网站根目录（即你上传打包后build文件夹内容的目录）新增.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>

该配置会让Apache将所有不存在的文件/目录请求全部返回根目录的index.html，路由解析逻辑完全交给React客户端处理，可覆盖所有访问场景的404问题。

现有代码优化建议 #

路由逻辑简化 #

当前路由写法存在冗余，Route的component属性和嵌套子组件二选一即可，包裹路由的空标签也可直接删除，优化后的代码：

<Switch>
  <Route exact path="/home">
    <Home />
    <Service />
    <Gallery />
    <Contact />
  </Route>
  <Route path="/gallery" component={BasicRows} />
  <Redirect to="/home" />
</Switch>

跳转逻辑简化 #

无需手动调用useHistory实现跳转，直接使用react-router-dom提供的Link组件即可，需要新窗口打开gallery路由时加target="_blank"属性：

import { Link } from 'react-router-dom'

<Link className="button" id="galleryButton" to="/gallery" target="_blank">
  Gallery
</Link>

备选无服务端配置方案 #

如果不想修改服务端配置，可将BrowserRouter替换为HashRouter，路由会自动携带#前缀（例如/#/gallery），hash部分不会发送到服务端，无需额外配置即可正常工作，缺点是URL美观度较低。

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