React APP 直接访问 URL 时，404

React.md

背景

React App 使用 React Router 定义路由，然后我们通过 React App 可以跳转到指定路径下。 如果你把浏览器的 Network 检测打开，你就会发现 React App 中路径变化时，并没有任何网络请求。 这是 SPA 的特点

问题

App 有一个画面/page1/，本地开发时 /page1/ 可以正常访问。 但是当 App 部署到服务器（如 Apache），配置入口（如 /app/），并在后台服务中做权限认证等工作时， 浏览器直接访问 /app/page1/ 时，出现 404。

原因

当浏览器直接访问 /app/page1/ 时，React App 尚未加载，而直接通过 Apache 进行路由跳转。 但是 Apache 并不知道 /app/page1/ 应该去哪，所以出现 404。

解决

最简单的方法就是修改 Apache 配置，App 入口修改成 /app/*。这样所有 /app/* 都会被匹配到 React App。 但是真实 App 并不会这样配置，毕竟这样配置太随意了。

所以，真实 App 的解决方案，在后台服务处理 /app/*，将其重定向的 React App。 这样做的好处是，可以在任意界面进行权限认证，并且可以控制图片、视频等资源的下载。对于企业级 App 来说，细粒度的权限和资源监控至关重要。