React Router v4/v5 でネストされたルーティングを実装するにはどうすればよいですか?

React Router v4/v5 によるネストされたルーティング

React Router は、React アプリケーション内にネストされたルートを作成するための強力なメカニズムを提供します。これにより、ルートをモジュール化し、複雑なナビゲーション構造を作成できます。

React Router v4 でネストされたルートを作成するには、親ルートを定義し、その中で子ルートを指定します。たとえば、アプリをフロントエンド セクションと管理セクションに分割するには:

<code class="jsx"><Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} /></code>

ただし、React Router v4 ではルートが他のルート内にネストされないことに注意することが重要です。代わりに、子ルートは親コンポーネント内に配置されます。したがって、上記のコードは次のように変換されます:

<code class="jsx"><Route path="/" component={Frontpage} /></code>

この親コンポーネント:

<code class="jsx">const Frontpage = ({ match }) => (
  <div>
    <h2>Frontend</h2>
    <Link to={`${match.url}/home`}>Home</Link>
    <Link to={`${match.url}/about`}>About</Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);</code>

同様に、管理セクションの場合:

<code class="jsx"><Route path="/admin" component={Backend} /></code>

Withこの親コンポーネント:

<code class="jsx">const Backend = ({ match }) => (
  <div>
    <h2>Admin</h2>
    <Link to={`${match.url}/home`}>Dashboard</Link>
    <Link to={`${match.url}/users`}>Users</Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

このアプローチにより、アプリケーションのさまざまなセクションのルート定義と UI レンダリングの両方をカプセル化するモジュール式の再利用可能なコンポーネントを作成できます。

以上がReact Router v4/v5 でネストされたルーティングを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。