raect でのネストされたルーティングの使用 (マルチレベル ルーティング)

1. はじめに

React では、ネストされたルーティングとは、コンポーネントに複数のサブコンポーネントが含まれており、各サブコンポーネントがサブルートに対応することを意味します。この方法を使用すると、ページ構造をより柔軟に編成でき、ページのネストや切り替えを簡単に実装できます。

React Router では、コンポーネントの render 属性またはコンポーネント属性を使用してサブコンポーネントをレンダリングし、path 属性を通じてルートを照合できます。その構文は次のとおりです。

ネストされたルーティングを使用する場合、親コンポーネントでいくつかの共通コンポーネントを定義し、子コンポーネントの props.children を通じてそれらを参照できます。このアプローチにより、コードがより簡潔になり、理解とデバッグが容易になります。

2. 使用する

App コンポーネントをレンダリングするときは、必ず BrowserRouter タグでラップしてください。理由がわからない場合は、「React でのルーティングの基本的な使用法」を参照してください。

 <BrowserRouter>
     <App/>
    </BrowserRouter>
)

Appとjsxに親ルートを登録します。
ここでのMyNavLinkは独自にカプセル化されたNavLinkであり、NavLinkを使用する場合と同じです。

   <MyNavLink to="/about" >About</MyNavLink>
   <MyNavLink to="/home" >Home</MyNavLink>
   
	<Switch>
        <Route path='/about' component={
    
    About} />
        <Route path='/home' component={
    
    Home} />
	</Switch>

ホームコンポーネントにサブルートを登録する

<MyNavLink to="/home/news">News</MyNavLink>
<MyNavLink to="/home/message">Message</MyNavLink>

 {
    
    /* 
              注册子路由时要带上父路由的 path
              路由匹配是按照注册顺序匹配的
    */}
            <Route path="/home/news" component={
    
    News} />
            <Route path="/home/message" component={
    
    Message} />

注: ルートのマッチングは登録順に基づいて行われるため、子ルートを登録する場合は親ルートのパスを持参する必要があります
個人ブログ: Yu Sheng の学習メモ