React混合使用hash路由与非hash路由时/token_exchange无法访问怎么办

• 首先存在拼写错误：内层HashRouter下的路由标签写错为<Rout>，缺少末尾的e，正确应为<Route>，这会导致/#/foo路径无法正常匹配FooPage组件。
• 路由嵌套逻辑冗余：你将HashRouter嵌套在了匹配exact path="/"的Route内部，属于不必要的嵌套，会提升路由维护复杂度。
• Cannot GET /token_exchange报错的核心原因：你使用了BrowserRouter（基于HTML5 History API实现），直接访问/token_exchange路径时，浏览器会先向服务端请求该路径对应的资源，而你的静态服务没有配置History模式的fallback规则，服务端找不到对应路径的资源就返回了404错误，还没等前端路由接管匹配就已经报错了。

• 修正拼写错误：将<Rout path="/foo" component={FooPage}/>改为<Route path="/foo" component={FooPage}/>。
• 优化路由结构：去掉不必要的嵌套Router，你可以直接把Hash路由对应的逻辑放在/路径对应的首页组件内部，不需要在根路由配置里嵌套HashRouter。
• 配置静态服务的fallback规则：
  • 本地开发用webpack-dev-server的话，在devServer配置项中添加historyApiFallback: true
  • 用Nginx部署的话，在站点配置中添加try_files $uri $uri/ /index.html;
  • 其他静态服务统一配置规则：所有未匹配到静态资源的请求，都返回根目录的index.html，让前端接管路由匹配逻辑。

内容的提问来源于stack exchange，提问作者Stupid.Fat.Cat