Получить React корневой путь URL

Question

Я создаю приложение «Реакция» с помощью команд «Создать-Реакт-приложение» и «Реактив-маршрутизатор».Я хотел бы получить корневой URL-адрес моего приложения реагирования, так как оно может обслуживаться в другом месте:

• На производстве: example.com/interface/
• На местном языке:localhost /

Это различие не влияет на ссылки на разные страницы, так как реагирующий маршрутизатор обрабатывает местоположение в соответствии с корневым путем реакции.На самом деле мои изображения хранятся в общедоступном пути, поэтому я могу получить к нему доступ в базовых местоположениях: /<page>

<img src={images/example.png}>

, но если я на подстранице или просто URL-адрес заканчивается на«/» как /<page>/

<img src={images/example.png}>

не будет работать, потому что браузер ищет изображение в /<page>/images/example.png вместо /images/example.png.Более того, если я установлю для изображения src значение /images/example.png, оно будет работать только на локальном хосте, но не в рабочей среде, потому что при работе браузер ищет изображение на example.com/images/example.png вместо example.com/interface/images/example.png

. Поэтому мне нужно получитьпуть реагирующего корневого URL.Это позволяет мне получить "/" в localhost и "/ interface /" в производственном процессе, например

Спасибо за помощь

Answer 1

Если я правильно понимаю вашу проблему, вы хотите иметь возможность установить другой корневой путь в зависимости от вашей среды разработки и вашей производственной среды.

К счастью, create-реагировать-приложение позволяет вам создавать переменные среды, используя файл .env.

Вам понадобится один из этих файлов как на локальном, так и на производственном уровне.Обратите внимание, что вы НЕ ДОЛЖНЫ добавлять эти файлы в систему контроля версий, поскольку они обычно содержат секретные ключи, и даже если они этого не делают, это хорошая практика.

После создания файла .env вам потребуетсяпрефикс всех ваших переменных окружения с REACT_APP<environment variable>, поэтому в этом случае REACT_APP_ROOT_PATH.Затем вам нужно будет установить его следующим образом:

REACT_APP_ROOT_PATH=localhost/ для вашей локальной среды и

REACT_APP_ROOT_PATH=example.com/interface/ для вашей локальной среды.

Для более сложного использованияэта функция, вот некоторая документация: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env

Надеюсь, это поможет.

Answer 2

Я нашел решение: Webpack получает ответный корневой URL-адрес в переменной env PUBLIC_URL

Решение состоит в том, чтобы изменить изображение src:

<img src=`${process.env.PUBLIC_URL}/images/example.png`

, которое работает в производственном процессе,в развитии и в любом другом контексте.Спасибо за вашу помощь

Answer 3

Это можно сделать, установив свойство homepage в package.json.
При создании проекта вы увидите сообщение, объясняющее его:

Проект был построен при условии, что он размещенв корне сервера.Чтобы переопределить это, укажите домашнюю страницу в вашем package.json.Например, добавьте это, чтобы построить его для страниц GitHub:

"homepage": "http://myname.github.io/myapp"

См. Документацию: Развертывание: Построение для относительных путей

Если вы сделаете это, он также должен работать на производстве, когда он работает в локальной среде разработчика.

В вашем случае, установите "homepage": "https://example.com/interface/", чтобы он работал на производстве.Вам не нужен дополнительный код для этого.

Имейте в виду, что вам, возможно, придется импортировать пути к изображениям должным образом, чтобы логика обрабатывалась веб-пакетом.У вас не должно быть реальных веб-путей в ваших компонентах, просто импортируйте вещи из путей, которые есть в вашей среде разработки, и магия работает.

import example from 'images/example.png';
[...]
<img src={example} />

См. Добавление изображений, шрифтов и стилей и Использование общей папки: когда использовать общую папку