(Обновлено ниже с небольшим количеством дополнительной информации)Проблемы с глубокими маршрутами на приложение одной страницы на Firebase хостинг
У нас реагируют на основе одной страницы веб-приложение, которое живет на Firebase хостинг. Мы использовали маршрутизацию на основе хаша до этой точки (например, mysite.com/#/path/to/content). Мы представили React Router, который позволяет нам иметь более красивые URL-адреса (например, mysite.com/path/to/content), но теперь приложение не загружается, когда мы переходим непосредственно к глубокому маршруту. Подробности ниже:
Использование React Router потребовало от нас использования перезаписи URL в Firebase Hosting. Направления довольно просты - похоже, все, что вам нужно сделать, это:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
... внутри файла firebase.json. На самом деле, наш полный firebase.json файл выглядит следующим образом:
{
"firebase": "",
"public": "dist",
"rules": "rules.json",
"ignore": [
"firebase.json",
"**/.*",
"**/*.map",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
Ничто тоже не сложно (мы делаем firebase deploy -f в нашем сценарии сборки, если вам интересно, почему firebase аргумент пуст). Указываемое rules.json файл еще проще:
{
"rules":{
".write":"true",
".read":"true"
}
}
Когда я загрузить приложение, перейдя в базовую URL и начать навигацию по всему, все в порядке. Если я перейду непосредственно к маршруту на одном уровне в глубину (например, mysite.com/path), это тоже работает.
ОДНАКО
Если я перейти непосредственно к маршруту на глубоком уровне, или даже к маршруту верхнего уровня с косой чертой (например, mysite.com/path/ или mysite.com/path/to/content), то приложение не загружается.
В частности, то, что происходит это index.html загрузки страницы, а затем в браузер, загрузите нашу WebPack созданного bundle.js файла, на который ссылается в index.html, но что Firebase хостинг возвращается для этого JS файла содержания индекса .html файл. Итак, как и ожидалось, что мы видим в консоли браузера эта ошибка:
Uncaught SyntaxError: Unexpected token <
... по строке 1 «расслоения файла». Если просмотреть содержимое файла в пачке Девых инструментов Chrome, в строке 1 файл расслоение буквально так:
<!doctype html>
... который затем следует остальной часть HTML из файла index.html ,
Похоже, что происходит правило перезаписывания URL-адреса Firebase: «О, вы пытаетесь ссылаться на JS-файл - я вижу, что я должен вернуть содержимое index.html для всего, поэтому здесь вы идти". Но это не может быть всегда, или сайт никогда не будет работать ни при каких обстоятельствах. Так почему это работает, если я начинаю с сайта root, но ломается, если я вставляю глубокий URL-адрес в приложение? У меня нет идеи.
Если это помогает, вот как мой index.html файл ссылается на файл связки:
<script src="bundle.ce843ef7a2ae68e9e319.js"></script></body>
Так что похоже проблема с Firebase хостинга, но я также мог видеть, что, возможно, я не понимаю Реагировать маршрутизатор в на каком-то уровне, и поэтому я каким-то образом напортачил на клиентский код таким образом, что он заставляет сервер возвращать неправильную вещь.
Вот я надеюсь, что это какая-то глупая конфигурация, которую нам не хватает. Любая помощь приветствуется!
Спасибо!
ОБНОВЛЕНИЕ: я удалил наше приложение, чтобы оно возвращало только «привет, мир», который обходит все материалы, основанные на Реагировании, включая React Router, и проблема сохраняется, поэтому я больше не думаю, что это имеет что-то делать с React-Router, хотя я полагаю, что все еще есть небольшой шанс, что это может иметь какое-то отношение к React.
Это было полезно, спасибо приятелю :) – Crema
У меня такая же проблема, но не сработала для меня –
Спасибо! У меня такая же проблема, имейте в виду, что это также повлияет на ссылки на файлы CSS, вам также понадобится/на них. – Lancelot