是否有可能不必將上下文根目錄硬編碼到用戶react-router

Question

由於Web應用程序上下文根的概念通常被視為部署問題而不是開發問題，因此我想知道在使用React Router進行網頁導航時是否可能不對源代碼中的上下文根進行硬編碼。

我希望能夠做的是使用部署描述符（例如web.xml）指定的任何上下文根部署我的Web應用程序，而不更改任何我的React源代碼。

以下是對保羅答案的跟進。

首先，非常感謝Paul。 我完全同意在這方面可以使用“basename”屬性。 我們可以使用構建腳本將“baseName”替換為與部署描述符指定的最終上下文根匹配的不同值。

但是，我認為這樣做只會隱藏而不是改變上下文根必須嵌入源代碼中的事實，這在概念上應該是部署問題。

我非常想知道為什么React Router選擇不解析相對於上下文根的路徑“/”，即將“/”匹配到“ http：// host：port / webapp / ”，或者至少提供一個選項，例如

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

畢竟，將上下文根的實際價值視為一種發展問題更為常態而不是例外。 這是否是提交給React Route團隊的合理要求？

Answer 1

React Router允許您為應用程序指定基名 。 基本名稱將從路徑名中刪除，並且位置將與路徑的其余部分匹配。

例如，如果您設置了基本名稱/mysite ，那么對/mysite/page-one的請求將嘗試將路徑名/page-one與您定義的路由進行匹配。

動態設置basename值只是將值注入代碼中，使得代碼在創建將由<Router>使用的history實例時訪問該值。

一種可能的解決方案是在渲染HTML時在window上設置變量。

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

然后，您可以在創建history實例時在應用程序中訪問該值。

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