Перенаправление запросов сервера в /index.html для React / Angular SPA

#angular #reactjs #react-router #angular-routing #deep-linking

#angular #reactjs #react-маршрутизатор #angular-маршрутизация #глубокая компоновка

Вопрос:

Допустим, у меня есть приложение React или Angular, размещенное на www.mywebsite.com/index.html с Apache, обслуживающим файл веб-приложения. Внутри приложения у меня определено много маршрутов, таких как /aboutus или / faq. Но, как мы все знаем, на самом деле не существует / aboutus.html или /faq.html файлы. Эти маршруты встроены в маршрутизатор в веб-приложении.

Итак, мне интересно, что произойдет, если кто-то попытается получить доступ www.mywebsite.com/aboutus напрямую, без предварительной загрузки веб-приложения на www.mywebsite.com/index.html . Я прочитал в Интернете, что в этой ситуации, поскольку у вас есть только один фактический файл, вам нужно перенаправить все http-запросы в /index.html . Если вы используете Apache, вы должны настроить его на перенаправление всего.

Мне интересно, как маршрутизаторы React / Angular узнают, какой маршрут загружать после перенаправления. Например, если вы перейдете к www.mywebsite.com/aboutus, он перенаправляет на www.mywebsite.com/index.html и, согласно тому, что я прочитал в Интернете, приложение React / Angular сможет загружать маршрут / aboutus в приложении после перенаправления.

Я бы предположил, что /aboutus теряется при перенаправлении. Если ваш сервер перенаправляет на www.website.com/index.html , тогда вы находитесь по другому URL сейчас и потеряли /aboutus. Веб-приложение загружается, но без исходного целевого URL оно не может знать, куда идти. Как это может работать?

Ответ №1:

сервер не должен перенаправлять /aboutus на /index.html с 30-кратным ответом кода. вместо этого он должен ответить 200 index.html . в этом случае браузер загрузится www…../aboutus ссылка (она получит то же самое index.html как в .com/index.html путь, но только с другим URL), а скрипты FE famework обработают остальное

Ответ №2:

и, согласно тому, что я прочитал в Интернете, приложение React / Angular сможет загружать маршрут / aboutus в приложении после перенаправления.

^^ Это правда — то, что вы прочитали, вовсе не ложь. При начальной загрузке кода маршрутизатора он проверяет текущий URL-адрес и видит, есть ли совпадения, если он находит совпадение, он отображает этот маршрут — в противном случае он будет использовать запасной маршрут (возможно, home или аналогичный).