React项目使用BrowserRouter时直接访问子路由或刷新报404问题咨询

• 你当前使用的react-router的BrowserRouter路由模式属于前端单页应用路由，依赖浏览器HTML5 History API实现，所有路由跳转逻辑都在前端JS层处理，跳转时不会真实向后端服务器发起资源请求。
• 从首页点击Link组件跳转时，react-router会拦截点击事件，仅修改浏览器地址栏URL、同时渲染匹配的CategoryPage组件，全程无后端交互，因此可以正常加载页面。
• 直接访问分类页URL或刷新分类页时，浏览器会将当前完整URL（如/mugs）真实发送给你的托管服务器，而服务器上不存在对应路径的静态资源文件，因此返回404错误。

下面提供两个可行解决方案，按需选择即可：

方案1：切换为HashRouter（改造成本最低） #

直接修改App.js中的路由引入即可，不需要调整其他业务代码：

// 把原来的BrowserRouter替换为HashRouter
import { HashRouter as Router, Switch, Route } from "react-router-dom";

修改后URL会自动加上#前缀（如/#/mugs），#后的内容不会被发送到服务器，服务器永远只会请求根路径的index.html，之后由前端JS处理路由匹配，即可解决404问题。

方案2：配置服务器路由回退规则 #

如果不想URL带#，可以给托管服务器配置重写规则，让所有不存在的路径请求都回退到根目录的index.html：
你当前使用的000webhost支持.htaccess配置，在项目根目录新建.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>

配置完成后服务器收到/mugs这类不存在的路径请求时，会返回根目录的index.html，再由react-router前端匹配路由渲染对应页面，即可正常访问。

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