ホームページ > 記事 > ウェブフロントエンド > React Router v4/v5 でネストされたルートを作成するにはどうすればよいですか?
ネストされたルートを使用すると、React アプリケーション内でナビゲーションのための階層構造を作成できます。 React Router v4 および v5 では、
アプリケーションをフロントエンド領域と管理領域に分割する次の例を考えてみましょう。
<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} />
上の例では、最初の < ;一致>定義はフロントエンド ルートを定義し、2 番目の定義は管理ルートを定義します。各ルートは、そのルートがアクセスされたときにレンダリングされるコンポーネントに関連付けられます。
React Router v4 では、
<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 サイトの他の関連記事を参照してください。