ユーザーの反応ルータにコンテキストルートをハードコードする必要はありません

Question

Webアプリケーションのコンテキストルートの概念は、一般的に開発上の問題ではなく、配備の問題と考えられていますので、 WebページのナビゲーションにReact Routerを使用している場合、ソースコード内のコンテキストルートをハードコードする。

私ができることを望むのは、デプロイメント記述子で指定されたコンテキストルートを使用してWebアプリケーションをデプロイすることです。私のReactソースコードを変更することなくweb.xmlを作成できます。

以下は、ポールの答えをフォローアップすることです。

まず、Paulに非常に感謝します。私は、この点で "basename"プロパティを使用できることに完全に同意します。また、ビルドスクリプトを使用して、 "baseName"を、デプロイメント記述子で指定された最終的なコンテキストルートに一致する異なる値に置き換えることができます。

しかし、私は、コンテキストルートが概念的に配備上の関心事でなければならないソースコードに埋め込まれなければならないという事実を、変更するのではなく隠すだけであると主張します。

React Routerが "/"を "http://host:port/webapp/"に一致させる、または少なくともオプションを提供するなど、コンテキストルートとの相対的なパス "/"を解決しないことに非常に驚いています。結局のところ、開発の問題ではなく、コンテキストルートの実際の値を例外は例外よりも扱うのが普通です。これは、React Routeチームに提出する合理的な要求ですか？

Answer 1

リアクタ・ルータでは、アプリケーションにbasenameを指定することができます。ベースネームはパス名から取り除かれ、ロケーションはパスの残りの部分と照合されます。

たとえば、ベース名が/mysiteに設定されている場合、/mysite/page-oneへのリクエストは、パス名/page-oneと定義されたルートを照合しようとします。

ベース名の値を動的に設定すると、<Router>で使用されるhistoryインスタンスを作成しているときにコードにその値にアクセスできるようにコードに値を注入するだけです。

可能な解決策の1つは、HTMLをレンダリングするときにwindowに変数を設定することです。

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

あなたは、あなたがあなたのhistoryインスタンスを作成するときに、アプリケーションでその値にアクセスすることができるだろう。

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