問題タブ [react-loadable]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
react-router - 中のルートを決める条件に基づいてレンダリングする
useraと aの 2 種類のルートがありprojectます。userルートは最上位の URL リソースですがproject、user. 例:/users/1/fooと/users/1/projects/2/bar.
ルートに が含まれていない場合にのみユーザー ルートに固有のコンポーネントを表示し、含まれている場合は/projects/:idプロジェクト固有のコンポーネントを表示したいと考えています。
以下を試すと、どちらの場合も/users/:idルートがロードされます。
通常、これは、いずれかのコンポーネントを示す条件付きのコンポーネントを使用することで非常に簡単に実現できますが、私の要件は、ユーザー固有およびプロジェクト固有のコンポーネントを動的にロードすることです (インポートは自動的に処理されwebpackますreact-loadable)。ルートレベルのソリューション、またはreact-loadable.
編集
問題は、ルートに間違ったパスを指定していたことです。より具体的な ( project) ルートを最初に<Switch />
reactjs - React Loadable を使用したコード分割とコンテナーを使用したルーティング
すべてのメインルートのコード分割を実現して、すべてのページに独自のファイル (サブコンポーネントとともに) を持たせたいと考えています。たとえば、Routeコンテナを指すコンポーネントを含むメインのレンダリング関数があります。
各コンテナは次のようになります。
コンテナーをラップしてルートで参照しようとしましたが、うまくいきませんでした:
では、何をラップすればよいのでしょうか。
javascript - 反応ロード可能なコンポーネントのテスト
Reactを使用するコンポーネントのテストに問題がありますreact-loadable。たとえば、小道具Buttonを受け取るかどうかに応じて、次のようにコンポーネントをロードするコンポーネントがあるとします。iconIcon
ボタン.js
ただし、このコンポーネントをテストすると、Iconまだロードされておらず、代わりにテストで<div>Loading...</div>要素のみが検出されます...
Button.test.js
実際の s を使用せずにこの状況を処理するエレガントな方法はありsetTimeoutますか?