路由问题答案

【问题标题】：Trouble in Routing路由问题
【发布时间】：2018-09-30 18:59:29
【问题描述】：

我在 React 中使用 react-router-dom 和 react-router-redux 进行路由。我无法路由到相对路径。就我而言，'/login.

这里是代码。 https://codesandbox.io/s/y73931q871

如果我在本地运行代码，它会抛出：

【问题讨论】：

标签： reactjs webpack react-redux react-router-dom react-router-redux

【解决方案1】：

在 webpack.config.js 中，您不应错过 devServer 对象的 historyApiFallback: true。像这样的：

  devServer: {
    compress: true,
    port: 9000,
    host: '0.0.0.0',
    historyApiFallback: true
  },

另外，在您的 Route 配置中，您需要像这样重新排序 Routes

export const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  </Provider>
);

re-order 是必需的，因为Switch 只渲染第一个匹配的路由，而像/login 这样的路径也将匹配/，因此只渲染Home，所以所有路径都以其他路径为前缀路径需要放在最后。

working demo

【讨论】：

我将它们重新排序以进行调试。对不起。伟大的！它在代码和框中工作，但它在我的浏览器中使用本地设置抛出了同样的错误。可能有些版本冲突。我已经用 package.json 更新了我的问题。让我知道你是否可以帮助我。谢谢。
@ChasingUnicorn，正如我所说，错误与 Route 无关，而是与您可能正在加载的字体有关，请检查您在登录页面上加载的字体
另外，如果字体加载是问题，那么我的主页也会抛出同样的错误。
查看stackoverflow.com/questions/45366744/…
谢谢，@shubham，但那篇文章我已经看过了。无论如何，我得到了解决方案。已更新您的答案。 :)

【解决方案2】：

根据docs，您应该使用带有索引（/）路由的exact prop。

所以代码应该是这样的：

export const App = () => (
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  </Provider>
);

【讨论】：

【解决方案3】：

请通过以下方式修改您的回家路线，它会按您的意愿工作

    <Route path="/" component={Home} exact />

【讨论】：