Browserify + WebStorm 调试中断 React-Router v4 BrowserRouter 中的路由

Browserify + WebStorm debug breaks routing in React-Router v4 BrowserRouter

出于教育目的,我正在使用 React 编写一个单页应用程序。我的 React-Router v4 BrowserRouter 可以在 CodeSandbox 上正确处理客户端路由,但不能在本地处理。在这种情况下,本地服务器是 webstorm 内置的 devserver。 HashRouter 在本地工作,但 BrowserRouter 不工作。

正常运行:https://codesandbox.io/s/j71nwp9469

您可能会在内置网络服务器 (localhost:63342) 上提供您的应用程序,对吗?内部 Web 服务器 returns 404 当使用 'absolute' URL(以斜线开头的)时,因为它提供来自 localhost:port/project_name 而不是来自 [=12] 的文件=].这就是为什么您必须确保将所有 URL 从绝对 URL 更改为相对 URL。

无法将内部网络服务器设置为使用项目根目录作为服务器文档根目录。但是您可以将其配置为使用 http://<host name>:<port> 之类的 URL,其中“主机名”是在 hosts 文件中指定的名称,例如 127.0.0.1 myhostName。参见 https://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559

解决方案是了解推送状态路由和历史 API 的工作原理。在为利用 HTML5 历史记录 API 的单页应用程序提供服务时,有必要通过索引页面代理请求。

预计 Webstorm 开发服务器不会包含此功能,因此在此线程中提及 Webstorm 是一个错误。

有多个 < 20 行的库可以为我们做这个,或者可以很容易地手工编码。