使用热重新加载React redux路由不适用于刷新

Question

我定义了以下路线

<Route path='/' component={App}>
        <IndexRoute component={LoginContainer} />
        <Route path='landing' component={LandingComponent} />
        <Route path='login' component={LoginContainer} />
    </Route>

现在，当用户点击loginContainer上的登录按钮时，他将被定向到目标网页（来自路线/着陆）。所以现在网址改为 http://server:port/landing

现在，如果我修改文件并使用热模块重新加载（web pack dev服务器）保存，我会收到一条错误消息，指出无法获取http://server:port/landing。这是真的，因为没有这样的页面，我该如何解决这个问题。

我正在使用react-router，react-router-redux和webpack dev服务器。

Answer 1

您需要在webpack dev服务器配置中启用historyApiFallback。

这将重定向到404上的索引页面，从而允许路由器启动以查找您的子路由。

如需了解更多信息，请参阅this answer。

了解为何需要这些信息，或其他更深入的信息。