React Router V6 のアップデート

React Router V6 の変更点

私は Router バージョン 5.x を使用していましたが、Router V6 にいくつかの変更が加えられており、ネストされたルートに対してより使いやすいものになっていることに突然気付きました。ここで簡単に紹介させていただきます。

1. < スイッチ > が < ルート > に名前変更されました

従来、Router を使用する場合、Switch でラップする必要がありましたが、これによりルートマッチング (単一マッチング) の効率が向上します。 V6 では、このトップレベルコンポーネントの名前は Routes に変更されますが、機能はほとんど変更されないことに注意してください。

2. <Route>の新機能の変更

コンポーネント/レンダリングは要素に置き換えられます

// v5
<スイッチ>
    <ルート パス="/about" コンポーネント={About}/>
    <ルート パス="/home" コンポーネント={Home}/>
</スイッチ>
//v6
<路線>
    <ルートパス="/about" 要素={<About/>}/>
    <ルートパス="/home" 要素={<Home/>}/>
</ルート>

3. ネストされたルートが簡単に

3.1 具体的な変更点は次のとおりです。

<Route children> は子ルートを受け入れるように変更されました。
< Route exact > や < Route strict > よりも単純な一致ルール。
<ルートパス> パス階層がより明確になりました。

関数App() {
  戻る （
    <ブラウザルーター>
      <路線>
        <ルートパス="/" 要素={<ホーム />}} />
        <ルートパス="/about" 要素={<About/>}>
          <ルート パス="/about/message" 要素 = {<Message/>} />
          <ルートパス="/about/news" 要素={<News/>} />
        </ルート>
      </ルート>
    </ブラウザルーター>
  );
}
関数About() {
  戻る （
    <div>
      <h1>について</h1>
      <Link to="/about/message">メッセージ</Link>
	  <Link to="/about/news">ニュース</Link>
        （*）
       上記で定義されたさまざまなルーティングパラメータに従って、<MyProfile /> または <OthersProfile /> を直接レンダリングします。
        */
      <アウトレット />
    </div>
  ）
}

ここでの < Outlet /> はプレースホルダーに相当し、{this.props.children} と非常によく似ており、ますます Vue に似てきています 😎。

3.2 V5 で廃止されたリダイレクト

//v5
<リダイレクト先="/"/>
//v6
<ルートパス="*" 要素={<移動先="/" />}}/>

3.3 複数の < ルート />

以前は、React アプリで使用できるルートは 1 つだけでした。しかし、今では React App で複数のルートを使用できるようになり、異なるルートに基づいて複数のアプリケーションロジックを管理するのに役立ちます。

'react' から React をインポートします。
'react-router-dom' から Routes, Route をインポートします。
関数ダッシュボード() {
  戻る （
    <div>
      <p>ほら、ルートがもっとあるよ！</p>
      <路線>
        <ルート パス="/" 要素 = {<DashboardGraphs />}} />
        <ルート パス="請求書" 要素 = {<InvoiceList />} />
      </ルート>
    </div>
  );
}
関数App() {
  戻る （
    <路線>
      <ルートパス="/" 要素={<ホーム />}} />
      <ルート パス="dashboard/*" 要素 = {<Dashboard />} />
    </ルート>
  );
}

4. useHistoryの代わりにuseNavigateを使用する

// v5
'react-router-dom' から useHistory をインポートします。
関数MyButton() {
  履歴を useHistory() にします。
  関数handleClick() {
    履歴をプッシュします('/home');
  };
  <button onClick={handleClick}>送信</button>を返します。
};
//v6では、history.push()はnavigation()に置き換えられました
'react-router-dom' から useNavigate をインポートします。
関数MyButton() {
  ナビゲート = useNavigate();
  関数handleClick() {
    ナビゲート('/home');
  };
  <button onClick={handleClick}>送信</button>を返します。
};

history の使用法も次のように置き換えられます。

// v5
履歴をプッシュします('/home');
履歴を置き換えます('/home');
// v6
ナビゲート('/home');
ナビゲート('/home'、{replace: true});

5. Hooksの新しいフックuseRoutesがreact-router-configに置き換わる

関数App() {
  要素をuseRoutes([
    { パス: '/'、要素: <Home /> },
    { パス: 'ダッシュボード'、要素: <ダッシュボード /> },
    { パス: '請求書',
      要素: <請求書 />,
      子供たち： [
        { パス: ':id'、要素: <請求書 /> },
        { パス: 'sent'、要素: <SentInvoices /> }
      ]
    },
    // リダイレクト { パス: 'home', リダイレクト先: '/' },
    // 404 見つかりません { パス: '*'、要素: <NotFound /> }
  ]);
  要素を返します。
}