404 при попытке ввести маршрут реагирующего приложения

Question

Я только что развернул свою сборку приложения React на панели c. В приложении есть разные маршруты, и каждый раз, когда я пытаюсь добраться до одного из них, я получаю 404 Not found. Например, если я попытаюсь добраться до http://example.com/, он войдет на веб-сайт, и если я нажму кнопку, которая связывает меня с http://example.com/articles, это сработает. Но если я попытаюсь получить http://example.com/articles по ссылке, которой я поделился, или просто набрав этот адрес, я получу 404 Not found. Этого не происходит, когда я запускаю режим разработки на локальном хосте.

Я изменил URL-адрес домашней страницы - "homepage": "http://example.com", в пакете. json и это не повлияло.

Мое приложение root обернут <Router>

function App() {
  return (
    <Provider store={store}>
      <Router>
        <React.Fragment>
          <CssBaseline />
          <Header title="exampletitle" />
          <MobileHeader />
          <Main />
          <BottomNavbar />
        </React.Fragment>
      </Router>
    </Provider>
  );
}

И это компонент Main. js, который маневрирует маршрутами.

function Main(props) {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route exact path="/about" component={About} />
        <Route exact path="/signup" component={Registerpage} />
        <Route exact path="/ap" component={Adminpage} />
        <Route exact path="/signin" component={SignIn} />
        <Route exact path="/userpanel" component={UserPanelPage} />
        <Route path="/article/:category" component={Articlepage} />
        <Route path="/articlepage/:id" component={ReadArticlePage} />
      </Switch>
    </div>
  );
}

Может кто-нибудь подскажет, как чтобы эти страницы загружались, когда я захожу на них напрямую по их ссылке?

Answer 1

Если ваше приложение работает для всех маршрутов при навигации с использованием <Link> и history.push, но выдает 404 Not Found , когда вы вводите URL, отличный от http://example.com , скажем, http://example.com/articles, прямо в браузере вам необходимо:

Научить ваш сервер обрабатывать 404-е, перенаправив в индекс. html страница.

Вы можете сделать это одним из следующих способов:

1. Добавьте настраиваемую страницу 404 , которая перенаправляет вас на index. html.
2. Если ваше хостинговое решение, c -panel, предоставляет настройку страницы ошибки для развертывания, укажите index. html в качестве страницы ошибки.
3. Используйте HashRouter от реактивного маршрутизатора. Отметьте HashRouter Solution и Что такое HashRouter .

Также отметьте notes-on-client-side-routing и Как развернуть на cPanel .