Создание общих ссылок в React Router

Question

В настоящее время я работаю над app.wavetv.co

Когда кто-то переходит на новую страницу, URL-адрес app.wavetv.co/(channel name).Однако, когда я пытаюсь обновить эту страницу, она говорит, что страница не найдена.Я использую React Router для управления навигацией и Netlify в качестве хостинга.Не уверен, что я делаю не так, потому что важно, чтобы они могли поделиться этими ссылками.

Вот код:

https://github.com/wave-tv/wave-tv/blob/master/src/pages/channels.js

Answer 1

Проблема в том, что первый вызов GET / some_path пытается загрузить <SomePathComponent />, когда он должен быть похож на <Index><SomePathComponent /></Index>, так как на вашем сервере нет логики для обработки этого запроса (поскольку React Router должен это делать)

Хэш-история Идея состоит в добавлении знака # в конец корня вашего URL, после чего все # не будет отправлено на сервер.Таким образом, если бы URL был happ.wavetv.co/#/path, браузер сделал бы запрос GET для app.wavetv.co, вернул весь JavaScript, React Router затем загрузился бы, увидел / path и показал правильное представлениедля этого маршрута.React Router предоставляет компонент HashRouter , который вы можете использовать, чтобы получить маршрутизацию на основе хеш-функции.

Answer 2

Для этого вам нужно использовать SSR (рендеринг на стороне сервера), также известный как изоморфный, я рекомендую вам посетить Next.js, который является очень хорошей средой, которая создает готовое к работе приложение ssr реагировать, оченьпохож на create-реакции-приложение, поэтому вам не придется иметь дело с веб-пакетом и другими раздражающими вещами.