React アプリケーションにおけるルーティングの組織原則とベスト プラクティス
P粉046387133
2023-08-16 16:15:12
<p>App.js ファイルに複数のルートを記述しました。 </p>
<pre class="brush:php;toolbar:false;">function App() {
戻る (
<メインレイアウト>
<ルート>
<ルートパス="/a" 要素={<A />} />
<ルートパス="/b" 要素={<B />} />
<ルートパス="/c" 要素={<C />} />
<ルートパス="/d" 要素={<D />} />
</ルート>
<ルートパス="/" 要素={<ログイン />} />
</MainLayout> )}</pre>
<p>これらのルートを正しく整理するにはどうすればよいでしょうか?ルートが約 50 あり、App.js ファイルには 50 ルートすべてが含まれているため、これは適切な構造ではないと思います。 </p>
新しいコンポーネント
を作成できます。 リーリーAppRouter.jsx
:次に、ルートを含むファイル
を作成します。 リーリーroutes.js
:次に、それを
リーリーアプリ コンポーネントで使用します
:将来的に新しいルートを作成する必要がある場合は、
routes.js
に移動してそこに追加します。