Проблема в маршрутизации

Question

Я использую react-router-dom а также react-router-redux для маршрутизации в React. Я не могу проложить путь к относительному пути. В моем случае '/ логин.

Вот код https://codesandbox.io/s/y73931q871

Также, если я запускаю код в локальной системе, он выдает:

Answer 1

В webpack.config.js вы не должны пропустить historyApiFallback: true для объекта devServer. Что-то вроде этого:

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

Кроме того, в вашей конфигурации маршрутов, вам нужно изменить порядок маршрутов, как

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 все время, поэтому все пути, которые имеют префикс к другим путям, должны быть помещены в конце.

рабочая демо

Answer 2

Согласно документам, вы должны использовать exact реквизит с указателем (/) маршрут.

Так что код должен выглядеть так:

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

Answer 3

Пожалуйста, измените ваш домашний маршрут следующим образом, и он будет работать так, как вы хотите

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