React Router v4 または v5 でルートを効果的にネストするにはどうすればよいですか?

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

React Router を使用する場合、多くの場合、アプリケーションのナビゲーション構造を整理するためにネストされたルートを作成する必要があります。これにより、関連するルートをグループ化し、階層型ルーティング システムを作成できます。

問題:

ユーザーは、React Router v4 または v5 でルートをネストするときに問題が発生する可能性があります。よくある課題の 1 つは、アプリケーションをフロントエンドや管理領域などの個別のセクションに分割し、子ルートが適切なコンポーネント内で確実にレンダリングされるようにする方法を決定することです。

答え:

React Router v4 および v5 では、 をネストしてもネストは実現されません。コンポーネント。代わりに、ルートは他のコンポーネント内でネストされます。このアプローチは、React Router の以前のバージョンで使用されていたネスト構文とは異なります。

たとえば、次のルート構成を考えてみましょう:

<code class="jsx"><Route path='/' component={Frontpage}>
  <Route path='/home' component={HomePage} />
  <Route path='/about' component={AboutPage} />
</Route>
<Route path='/admin' component={Backend}>
  <Route path='/home' component={Dashboard} />
  <Route path='/users' component={UserPage} />
</Route>
<Route component={NotFoundPage} /></code>

この構成では、Frontpage コンポーネントが親として機能します。フロントエンド ルートのコンポーネントであり、バックエンド コンポーネントは管理ルートの親コンポーネントです。これにより、アプリケーションのセクションごとに個別のレイアウトとスタイルを作成できます。

たとえば、トピック ルートは、以前に 内にネストされているように定義されていました。次のように書き換えることができます:

<code class="jsx"><Route path='/topics' component={Topics} /></code>

そして、Topics コンポーネントはその子ルートを次のようにレンダリングします:

<code class="jsx">const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
);</code>

このアプローチに従うことで、React Router で効率的にルートをネストできます。 v4 または v5。これにより、アプリケーションの明確で整理されたナビゲーション構造を作成できます。

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