React Router v4 および v5 では、ネストされたルートをどのように構築しますか?

React Router のネストされたルート

React Router バージョン 4 および 5 では、ネストされたルートには少し異なるアプローチが含まれます。 をネストする代わりに、

たとえば、次のネストされたルート構成:

<match pattern="/" component="{Frontpage}">
  <match pattern="/home" component="{HomePage}"></match>
  <match pattern="/about" component="{AboutPage}"></match>
</match>
<match pattern="/admin" component="{Backend}">
  <match pattern="/home" component="{Dashboard}"></match>
  <match pattern="/users" component="{UserPage}"></match>
</match>
<miss component="{NotFoundPage}"></miss>

次のように構成する必要があります:

<route path="/" component="{Frontpage}"></route>
<route path="/admin" component="{Backend}"></route>

これらの 内では、次の例に示すように、子ルートを親コンポーネントのサブコンポーネントとして定義できます。

<code class="javascript">const Frontpage = ({ match }) => (
  <div>
    {/* Child routes for the frontend */}
    <link to="{`${match.url}/home`}">
    <link to="{`${match.url}/about`}">
    <route path="{`${match.path}/home`}" component="{HomePage}"></route>
    <route path="{`${match.path}/about`}" component="{AboutPage}"></route>
  </div>
);

const Backend = ({ match }) => (
  <div>
    {/* Child routes for the admin area */}
    <link to="{`${match.url}/home`}">
    <link to="{`${match.url}/users`}">
    <route path="{`${match.path}/home`}" component="{Dashboard}"></route>
    <route path="{`${match.path}/users`}" component="{UserPage}"></route>
  </div>
);</code>

この改訂された構造により、フロントエンド コンポーネント内の /home には / でアクセスできるようになり、/admin/ ではアクセスできるようになります。バックエンド コンポーネント内のホームには、/admin/home からアクセスできます。

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