Reactjs 路由问题

我使用

react-router-dom

和

react-router-redux

在react中进行路由。我无法路由到相对路径。在我的例子中，'/login

这是代码。

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

---

在webpack.config.js中，您不应该错过devServer对象的

historyApiFallback:true

。大概是这样的：

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

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

此外，在路由配置中，您需要按如下方式重新排列路由

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

export const App=（）=>(
);

需要重新排序

，因为

开关

只会呈现第一条匹配的路径，而像

/login

这样的路径也会匹配

/

，因此始终只呈现

主路径

，所以所有以其他路径为前缀的路径都需要放在末尾

根据，您应该使用带有索引（

/

）的

精确的
道具路线

因此，代码应该如下所示：

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

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

export const App=（）=>(
);
请按以下步骤修改您的回家路线，它将根据您的需要工作

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


我对它们重新排序以进行调试。很抱歉伟大的它在codesandbox中工作，但是它在本地设置的浏览器中抛出了相同的错误。可能存在版本冲突。我已经用package.json更新了我的问题。如果你能帮我，请告诉我。谢谢。@ChasingUnicorn，正如我所说的，这些错误与路由无关，而是与您可能正在加载的字体有关，请检查您在登录页面上加载的字体。另外，如果字体加载是问题所在，那么我的主页也会抛出同样的错误。请检查这个谢谢，@shubham，但我已经看到了那篇帖子。不管怎样，我找到了解决办法。已更新您的答案。：）