React Router v4/v5 でネストされたルートを作成するにはどうすればよいですか?

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

ネストされたルートを使用すると、React アプリケーション内でナビゲーションのための階層構造を作成できます。 React Router v4 および v5 では、<Route> を使用してこれを実現できます。 <一致>

例

アプリケーションをフロントエンド領域と管理領域に分割する次の例を考えてみましょう。

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

上の例では、最初の &lt ;一致>定義はフロントエンド ルートを定義し、2 番目の定義は管理ルートを定義します。各ルートは、そのルートがアクセスされたときにレンダリングされるコンポーネントに関連付けられます。

考慮事項

React Router v4 では、<Route> をネストしません。コンポーネント。代わりに、それらを別の 内に配置します。例:

<Route path="/topics" component={Topics} />

は次のようになります:

<Route path="/topics" component={Topics} />

トピック コンポーネントは次のように定義されます:

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

この構造により、柔軟性が高まり、アプリケーションのルーティングを制御します。

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