React Router v4/v5 でのネストされたルート

ネストされたルートを使用すると、React アプリケーション内でナビゲーションのための階層構造を作成できます。 React Router v4 および v5 では、 コンポーネントと コンポーネントを使用してこれを実現できます。

Example

次の例を考えてみましょう。ここでは、アプリケーションをフロントエンドに分割します。

上の例では、最初の 定義はフロントエンド ルートを定義し、2 番目の 定義は管理ルートを定義します。各ルートは、そのルートがアクセスされたときにレンダリングされるコンポーネントに関連付けられています。

考慮事項

React Router v4 では、 コンポーネントをネストしません。代わりに、それらを別の 内に配置します。例:

は次のようになります:

Topics コンポーネントは次のように定義されます:

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

この構造により、アプリケーションのルーティングをより柔軟に制御できるようになります。