Как организовать роутинг в React приложении?

Question

[Absky]

Есть приложение с "подприложениями" лежащее в корне проекта, откуда можно перейти в два логически не связанных между собой подприложения.

Для организации роутинга использовал react-router 4. Переход между страницами отрабатывает корректно, но при обновлении страницы подприложения (напр. localhost:8080/sample/second-page) страница теряется по 404 ошибке.

Как можно побороть эту проблему?

Comments

[Mikhail Osher]

Загуглить саму проблему

[Дмитрий]

Покажите код основного компонента App

[Absky]

Дмитрий,

import * as React from 'react';
import { useSelector } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { AppState, IsLoadingState } from './types/state';
import { NotFoundPage } from './projects/not-found/NotFoundPage';

import { HomePage } from './projects/intro/HomePage';
import { Sample } from './projects/sample/Sample';
import { SecondSample} from './projects/secondSample/SecondSample';
import { SampleTwo  } from './projects/sampleTwo/SampleTwo ';

interface Props {

}

export const App = (props: Props): React.ReactElement => {

  return (
    <>
      <Router>
        <div>

          <main className="content-box">
            <Switch>

              <Route exact path="/">
                <HomePage />
              </Route>

              <Route exact path="/sample">
                <Sample />
              </Route>

              <Route exact path="/sample/second-page">
                <SampleSecond />
              </Route>

              <Route exact path="/sample-two">
                <SampleTwo />
              </Route>

            </Switch>
          </main>
        </div>
      </Router>

    </>
  );
};

Но мне кажется, что дело в настройке Вебпака

[Дмитрий]

Absky, А где в вашем роутинге обработка page-one?

[Absky]

Дмитрий, то было "например", здесь это /sample/second-page

[Дмитрий]

Absky, А отладчиком не пробовали пройтись по компоненту или он даже не вызывается?

Answer 1

[Иван Шумов]

Перестать ломать голову и начать настраивать роутинг вебсервера, а не переносить проблему в код

Comments

[Absky]

Вот да, вопрос в том Как Вебпак настроить

[Иван Шумов]

Absky, Прочитать документацию не вариант, да?)

[vlad_kopylov]

Absky, попробуй

devServer: {
    hot: true,
    historyApiFallback: true
  }