ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。