使用 webpack 时直接加载路由答案

【问题标题】：Load routes directly when using webpack使用 webpack 时直接加载路由
【发布时间】：2015-03-22 18:51:36
【问题描述】：

我最近开始使用 react 和 webpack，虽然它在大多数方面都很棒，但是在测试应用程序时会渲染到 iframe 中，这使我无法直接加载非 root 路由。因此，如果我想测试 http://localhost:8000/#/signin 我无法加载该 url，而是我必须加载基本 url 并单击其中指向登录页面的链接（或者至少这是我拥有的唯一方法发现可行）。

有没有更好的方法来做到这一点？

这是一个similar question，它有一个非常老套的解决方案。从那以后有什么变化吗？

【问题讨论】：

#/signin 是根路由。哈希和它之后的任何内容都不会发送到服务器。您粘贴的 URL 在您的服务器上被视为 http://localhost:8000/。
是的，我意识到这一点，但是 React 应该检测 #/signin 哈希并呈现包含登录组件的相应路由（就像不使用 webpack 时一样）。
React 不提供路由。你在用react-router之类的东西吗？
对不起，我应该提到这一点。是的，我正在使用 react-router。

标签： reactjs webpack react-router

【解决方案1】：

你的意思是这样有效吗：localhost:8000/webpack-dev-server/？

以下也应该有效：

localhost:8000/webpack-dev-server/index.html
localhost:8000/webpack-dev-server/index.html/#/signin

这些应该可以在没有 iframe 的情况下工作：

localhost:8000/index.html/#/signin
localhost:8000/#/signin

如果不行，你为什么不右键单击指向登录页面的链接，复制链接地址并将其粘贴到浏览器中？

【讨论】：

你说得对，网址可以硬加载。也许这是一个 chrome 的东西，但是如果我手动更改 url 并单击 enter 它不会改变，但是如果我然后 cmd-r 它将加载路由。但是，问题仍然存在，因为当我单击 localhost:8000/#/foo 之类的链接时，浏览器 url 没有改变。这使得开发难以让我手动设置浏览器 url。使用 webpack 有助于防止大量的整页重新加载，但不是全部。是链接不包含 webpack-dev-server 路径的问题吗？我的链接是使用 react-router Link 组件创建的。
关于您发布的第二组链接，它们确实有效，但是使用它们会失去 webpack 的所有好处（没有异步重新加载文件）。至于复制链接并将其粘贴到浏览器中，我并不是说没有任何效果，我是说当你不得不一直硬重新加载时，生产力就会被破坏。
我认为开箱即用是不可能的。当您的应用在 iframe 中运行时，它不会更新浏览器 url 或历史记录。我不明白为什么在测试应用程序时需要 webpack 进行异步重新加载。我希望异步重新加载仅在开发过程中有用。
当我说测试时，我的意思是在开发过程中手动测试。

【解决方案2】：

似乎解决此问题的方法是加载包含 webpack 路径和您正在测试 ex 的哈希的 url。 http://localhost:8000/webpack-dev-server/#dashboard。这必须手动完成，因为应用程序中的任何链接都不包含webpack-dev-server 路径。

这允许在需要时偶尔对页面进行硬加载，但允许 webpack 在可能的情况下执行大部分热加载。

【讨论】：