При переходе по URL-адресу в приложении React я получаю 404, но когда я перехожу по ссылке на тот же URL-адрес, я получаю нужную страницу?

Question

Я просмотрел другие ответы и попробовал решения, но все еще немного запутался.

У меня есть URL-адрес, скажем, www.sitename.com, и у меня есть приложение React, использующее react-router-dom для маршрутизации.

      <Router>
        <Route
          path={process.env.PUBLIC_URL + "/"}
          exact={true}
          component={Home}
        />
        <Route path={process.env.PUBLIC_URL + "/about"} component={About} />
        <Route
          path={process.env.PUBLIC_URL + "/projects"}
          component={Projects}
        />
        <Route path={process.env.PUBLIC_URL + "/contact"} component={Contact} />
      </Router>

Я импортировал HashRouter в качестве маршрутизатора в этом проекте.

Другие ответы, которые я прочитал, говорят, что это решит проблему, с которой я столкнулся Когда страница перезагружается, браузер не сможет ничего отобразить, поскольку, например, не было содержимого в www.sitename.com/about, поскольку рендеринг контролировался со страницы index.html.

Использование ha sh маршрутизатор решил проблему, но теперь я не могу направлять людей на www.sitename.com/about, так как эта страница все еще не существует, React, похоже, делает URL www.sitename.com/#/about

Я читал документы, но не могу найти ответ, который имеет для меня смысл!

Answer 1

Когда вы пишете одностраничное приложение, вы на самом деле не перемещаетесь между разными HTML документами. Вместо этого вы модифицируете DOM, чтобы отображать другие данные.

Этот выглядит как разные страницы, но на самом деле это не так. Это вызвало всевозможные проблемы, потому что кнопка «Назад» в браузере не работала, и у вас не было разных URL-адресов для разных «страниц».

В качестве взлома люди изменили часть идентификатора фрагмента страницы и использовали JavaScript, чтобы определить, какой раздел SPA должен отображаться. В результате он поместит # в URL-адрес, поэтому у вас не может быть URL-адреса с /about, но вместо него будет #/about.

Это то, что делает HashRouter. Если вы просто сделаете ссылку на #/about, это сработает.

Производители браузеров отреагировали на это, добавив History API . Это обеспечивает механизмы для вставки URL-адресов в историю браузера и получения всех преимуществ # навигации с красивыми URL-адресами.

Он разработан для использования вместе с серверным кодом, который имеет тот же эффект, что и DOM. манипуляции, которые выполняет JavaScript.

Итак, если вы нажмете ссылку на /about:

1. JavaScript изменит DOM, чтобы отобразить страницу about
2. JavaScript изменяет URL-адрес на /about

но , если вы посещаете /about напрямую, сервер вместо этого генерирует страницу с информацией.

Это обеспечивает хорошую пищу для поисковых систем и контент, доступный даже в случае отказа JavaScript.

Это также больше работы , поскольку вам нужно заставить сервер дублировать работа клиента. К счастью, есть инструменты, облегчающие эту задачу. Несколько заполненных: далее. js, который использует isomorphi c JavaScript, чтобы клиентский код React запускался на сервере, и Gatsby , который генерирует stati c страниц во время сборки, поэтому вы можете использовать stati c хостинг.

У них есть свои собственные модули маршрутизатора, которые можно использовать вместо HashRouter.

Если вы хотите использовать URL без #, страницы, которые работают, даже если JavaScript дает сбой, и бонус к SEO: используйте один из этих подходов .

Существует также дешевый и грязный подход к взлому, который заключается в настройке вашего HTTP-сервера для обслуживания базового c HTML документа, который загружает React JS для каждого URL, который не является t a stati c file.

Это делает обязанностью клиентского кода смотреть URL-адрес и определять, какой контент показывать (точно так же, как это делает HashRouter). Это также имеет тенденцию вызывать множество URL-адресов, которые должны быть ошибками 404, чтобы вернуть 200 и этот базовый c HTML документ.

Вы бы отключили HashRouter для BrowserRouter , если бы вы сделали это.

Answer 2

Проблема в том, что когда клиент (браузер) запрашивает страницу на сервере (например, /about), а эта страница не существует на сервере, он выдает 404.

Чтобы решить эту проблему, вы должны настроить свой сервер так, чтобы он возвращал вам при каждом запросе файл /index.html, который знает о маршрутизации response-router-dom.

Для настройки вашего сервера, если вы используете Apache, вы должны следовать этому ответу (вы можете найти аналогичные руководства и для других веб-серверов):

Как настроить сервер apache для маршрута React?

Вы можно найти дополнительную информацию по этой ссылке:

https://developer.mozilla.org/en-US/docs/Web/API/History