反応ルータのサンプルセクションのルーティングはどのように機能しますか？

Question

反応ルータの例のセクションで指定された構造、特に "huge-apps"の構造を模倣しようとしています。私のフォルダ構造は次のようになります。

project 
--src 
    --huge-apps 
    --app.js 
    --index.html 
--index.html 
--webpack.config.js 

これは構造からの1つのレベルは内部で次のようにあるルータの例のセクション、反応するだけで異なります

examples 
--huge-apps 
    --app.js 
    --index.html 
--index.html 
--webpack.config.js 

を私の問題は、私は「/ srcに/として私のルートパスを指定する必要がありますhuge-appsフォルダ内のapp.js内のルーター設定内にあります。ただし、react router examplesセクションでは、huge-appsセクションのapp.jsファイル内にルートパスが "/"としてのみ指定されています。

"huge-apps"セクションの下にあるルートパスを "/"として指定することができます。

私はここで何が欠けているのか分からないようです。私は、ルータのバージョン2.0.0-RC5に例がベース名を使用している

おかげ

Answer 1

を反応させます。 （ブラウザの履歴プロジェクトの場合、ハッシュ履歴にはまったく必要ありません）ベース名が使用され、ルートディレクトリを指定してプロジェクトを検索します。すべてのパス名は、ベース名で始まるとみなされます。

decorating your historyでプロジェクトにベース名を追加できます。たとえば、あなたのURLが/huge-appsで始める必要がある場合：

import { useRouterHistory } from 'react-router' 
import { createHistory } from 'history' 

const history = useRouterHistory(createHistory)({ 
    basename: '/huge-apps' 
}) 

を今、あなたは/huge-appsに移動したときに、あなたのアプリケーションの中には、/する場所を検討します。同様に、URL /huge-apps/foobarはアプリケーション内に/foobarとみなされます。

あなたは、もちろん、ユーザーは任意の/huge-apps/* URLを要求したとき、それはあなたのindex.htmlファイルを提供するように、サーバーのセットアップを持っている必要があります。

リアクションルータのバージョンを2.8.1または3.0.0にアップグレードする必要があります。バージョン3は2と同じですが、廃止予定のバージョン1コードは削除されています。