一个关于react-router和后端路由的问题？

Question

我写的个人博客的项目，前端用的react-router，后台用的express，后台只提供接口，我点击导航条上面的选项，路由就会改变，然后切换到不同的组件，如图显示的。但是当我直接改变浏览器地址的url时，服务器就会报404错误，我大概理解是因为这样会请求后台接口，问题来了，是不是每写一个前端路由，后台也要相应写一个路由？

Answer 1

当然不是你想的这样，否则也太蠢了不是么？

问题在于你需要明白一件事情：前端路由是在页面内的 js 代码加载并执行完成之后才能正常工作的，当它开始工作的时候，URL 的变化就不再是传统意义上的刷新，而是跟踪 history 的变化。

那么什么时候加载成功了呢？一般来说就是通过 index.html 来加载的（这就是 spa 的最基本形态）

你手动刷新了非根路径的 URL 之后为什么 404 呢？很显然，这一次刷新之后得到的响应是你的后端提供的，并且不再是 index.html 了，那么你既没有后端对应的路由也无法通过 index.html 加载前端路由，不 404 还能是什么呢？

你有两种选择，一难一易。

难的是做同构处理，也就是前后端使用同一套路由，react router 本身是支持同构的，你可以参考它文档里关于 isomorphic 或 server side rendering 相关的内容。

易的是后端做全局路由匹配，无论是发过来的请求 URL 是什么，统统返回 index.html 让前端去匹配不同的 URL。