React アプリケーションにおけるルーティングの組織原則とベスト プラクティス

Question

App.js ファイルに複数のルートを記述しました。

function App() {

戻る （
 <メインレイアウト>
  <ルート>
   
    <ルートパス="/a" 要素={<A />} />
    <ルートパス="/b" 要素={<B />} />
    <ルートパス="/c" 要素={<C />} />
    <ルートパス="/d" 要素={<D />} />
   
  </ルート>
  <ルートパス="/" 要素={<ログイン />} />
</MainLayout> )}

これらのルートを正しく整理するにはどうすればよいでしょうか?ルートが約 50 あり、App.js ファイルには 50 ルートすべてが含まれているため、これは適切な構造ではないと思います。

Answer 1

新しいコンポーネント AppRouter.jsx:

を作成できます。 リーリー

次に、ルートを含むファイル routes.js:

を作成します。 リーリー

次に、それを アプリ コンポーネントで使用します:

リーリー

将来的に新しいルートを作成する必要がある場合は、routes.js に移動してそこに追加します。