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

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

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

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

<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} />

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

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

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

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

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

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

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