Возможно ли не иметь жесткий код контекста root для пользователя реакции-маршрутизатора

Question

Поскольку концепция корневого контекста веб-приложения обычно рассматривается как проблема развертывания, а не как проблемы разработки, я хотел бы знать, возможно ли не жестко задавать корневой каталог контекста в исходном коде при использовании React Router для навигации по веб-страницам.

То, что я хотел бы сделать, это развернуть мое веб-приложение с любым корневым контекстом, как указано в дескрипторах развертывания, например, web.xml, без изменения какого-либо исходного кода React.

Ниже приведено продолжение ответа Павла.

Прежде всего, большое спасибо, Пол. Я полностью согласен, что свойство "basename" может быть использовано в этом отношении. И мы можем использовать сценарии сборки для замены "baseName" другими значениями, которые будут соответствовать конечному корневому контексту, указанному дескрипторами развертывания.

Тем не менее, я бы сказал, что это будет скрывать, а не изменять тот факт, что корневой каталог контекста должен быть встроен в исходный код, что концептуально должно быть проблемой развертывания.

Мне очень интересно, почему React Router решил не разрешать путь "/" относительно корня контекста, то есть сопоставлять "/" с " http://host:port/webapp/", или, по крайней мере, предоставлять опцию например,

<Route path="/" relativeToContextRoot="true" …>

В конце концов, трактовка фактической ценности корневого контекста не как задачи разработки является скорее нормой, чем исключением. Будет ли это разумным запросом для отправки в команду React Route?

Answer 1

React Router позволяет указать базовое имя для приложения. Базовое имя будет удалено из пути, а местоположения будут сопоставлены с оставшейся частью пути.

Например, если вы установите базовое имя /mysiteзатем запрос /mysite/page-one будет пытаться соответствовать пути /page-one против ваших определенных маршрутов.

Установка значения базового имени динамически будет просто вопросом внедрения значения в ваш код таким образом, чтобы ваш код мог получить доступ к этому значению при создании history экземпляр, который будет использоваться вашим <Router>,

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

<script>
window.__BASENAME__ = '/some/root';
</script>

После этого вы сможете получить доступ к этому значению в своем приложении при создании history пример.

const BASENAME = window.__BASENAME__ || '/';
const history = useRouterHistory(createHistory)({
  basename: BASENAME
});