React Router — разное поведение dev и build — как исправить?

Question

[Abr_ya]

Есть проблема с пониманием работы React Router.
Я сделал приложение, которое использует git API, выводит информацию о пользователях и репозиториях.
Использую роутер.
Т.к. на хостинг выкладываю не в корень, а в подкаталог, в роутере добавил:
basename="/demo/git2/"
При запуске рабочего варианта (npm start) работает навигация и страницы открываются по прямой ссылке, в т.ч. страницы отдельных пользователей (если скопировать и вставить в адресную строку).
При сборке (build) и размещении на сервере
abr-just.ru/demo/git2
навигация по ссылкам работает:

но по прямой ссылке не открывается даже страница "about":

Ещё наглядное проявление бага: если в результате поиска перейти на страницу пользователя, потом поставить курсор в адресную строку и нажать Enter, в результате также NotFound.
Вопрос: что я делаю не так и как это исправить?

Comments

[Loli E1ON]

https://muffinman.io/react-router-subfolder-on-server/

[Abr_ya]

Loli E1ON, спасибо! Прямо всесторонне рассмотрен вопрос.

Answer 1

[McBernar]

Вам нужно, чтобы сервер направлял все запросы на индексный файл. Когда вы заходите на главную — сервер находит ее, потому что там есть index.html. Когда вы переходите по ссылкам — реакт трекает это и рендерит нужные страницы. Но как только вы пытаетесь открыть что-то напрямую — сервер просто не находит вашего about.html.

Гуглите «htaccess перенаправление на индекс»

Ладно, не гуглите, вот

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Comments

[Abr_ya]

Большое спасибо! И за решение, и за подробное объяснение происходящего.