具有热重载的 React redux 路由不适用于刷新

Question

我定义了以下路由

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

现在，当用户单击 loginContainer 上的登录按钮时，他将被定向到登录页面（从路线 /landing）。所以现在 url 更改为 http://server:port/landing

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

我正在使用 react-router、react-router-redux 和 webpack 开发服务器。

Answer 1

您需要在您的 webpack 开发服务器配置中启用 historyApiFallback。

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

有关为什么需要这样做的更多信息，或其他一些更深入的信息，请参阅 。