React Router v6: 変更点とv5との違いを初学者向けに詳しく解説

オリジナルreactrouter画像

はじめに

React Router v6は最新のバージョンであり、最近React Routerを学習し始めた方々にとっては、既にこのバージョンを使用しているかもしれません。

v6には多くの変更点が加えられており、v5との違いや変更点について初心者の方々に詳しく説明していきます。

以前の記事では、React Router v6でのルーティングの解説を行っていました。

dev-k.hatenablog.com

ただし、この記事はReact Router v6が最近アップグレードされたばかりの頃に書かれたものであり、現在の最新情報とは異なる可能性があります。

そのため、読者の方は自己判断を行っていただく必要があります。

React Router v6では、v5と比較して多くの変更が加えられています。

例えば、新しいルーティングAPIが導入されており、よりシンプルで柔軟なルーティングを実現できるようになっています。

また、v6ではReact Hooksが全面的に導入されており、ルーティングの機能もHooksで実装することが可能になっています。

React Router v6は、v5から大幅にアップデートされたため、v5で学んだことがそのまま使えるわけではありません。

しかし、v6でのルーティングの基本的な考え方はv5と同じです。

そのため、v5で学んだことを踏まえつつ、v6に必要な変更点を学ぶことで、より効率的にReact Routerを学習することができます。

最新バージョンであるReact Router v6は、今後も更なるアップデートが期待されています。

そのため、React Routerを学習する方々は、常に最新情報にアクセスすることで、最新の技術に常にアップデートされた知識を持つことが重要です。

まずは、基本のおさらいをしていきましょう。

React Routerとは何ですか?

React Routerは、React.jsでルーティングするためのパッケージです。

Reactを使用したSPA(シングルページアプリケーション)では、Webページを更新することなく異なるビューに遷移するためのルーティングが必要です。

React Routerを使用することで、これを実現できます。

React Routerは、JavaScriptライブラリであり、Reactのためのフル機能のクライアントおよびサーバー側のルーティングライブラリです。Reactが実行される場所であれば、どこでも使用することができます。

例えば、Webアプリケーション、Node.jsを使用したサーバーアプリケーション、React Nativeアプリケーションなどです。

また、ルーティング機能だけでなく、リダイレクトやネストされたルーティングなどの高度な機能も備わっています。

React RouterのAPIはシンプルで直感的であり、Reactのフレームワークと完全に統合されており、Reactアプリケーションの開発がよりスムーズで効率的になります。

React Routerのドキュメントやチュートリアルは充実しており、新しいユーザーでもすぐに始めることができます。

React Router v6

React Router v6は、以前のバージョンに比べて大幅に小さくなりました。圧縮されたバンドルのサイズは70%縮小され、さらにツリーシェイクを有効にしバンドラー全体で実行すると、出力はさらに低くなります。

現在、アプリ全体のバンドルサイズはわずか4KBしかありません。

これは、特にネットワーク接続が遅い/貧弱な場合に、小さなバンドルがアプリの読み込みを速くするために重要です。

React Router v6のコードは、以前のバージョンよりもはるかに簡潔で、魅力的なものになっています。

これは、開発者がアプリケーションをよりスムーズに構築し、メンテナンスするために役立ちます。

したがって、React Router v6は、小さなアプリから大規模なプロジェクトまで、どんなプロジェクトでも採用することができます。

そして、これはReactコミュニティ全体にとって非常に有益なことです。

スイッチコンポーネントをルートに置き換え

React Routerを使ったことがある人たちは、ルートをSwitchコンポーネントでラップし、複数のルートが一致する場合、そのうちの1つだけがロードされるようにする必要があることを知っています。

SwitchはReactのすべてのルーティングを担当し、RouteまたはRedirectの場所に一致する子をレンダリングします。

以下はRouter v5の例です。

return (
  <Switch>
    <Route path="/blogs/:slug" component={Blog} />
    <Route path="/blogs/new" component={NewBlog} />
  </Switch>
)

Router v6では、Switchコンポーネントの名前がRoutesに変更され、新しいelementプロパティが追加されました。

このelementプロパティを使用して、ルート要素に渡すカスタムコンポーネントを指定できます。

以下はRouter v6の例です。

return (
  <Routes> //Switchの名前がRoutesに変更
    <Route path="/blogs/:slug" element={<Blog />} /> //componentがelementに変更
    <Route path="/blogs/new" element={<NewBlog />} /> //componentがelementに変更
  </Routes>
)

Routesコンポーネントはアプリケーション全体に分散され、Route要素の下にある「path」と「Link」要素の値は、Routesでレンダリングされた親ルートに対して自動的に相対的になります。

したがって、ルートの順序を心配する必要はありません。

現在のURLに基づいて最も具体的なルートが最初に選択されます。

相対パスとリンク

React Router v6では、パスとリンクの両方が親ルートに相対的な形式になりました。

この新しい形式では、相対パスを使用する場合は、「/」を省略することができます。

<Route path = "/users" component = {Users} />
<Route path = "users" element = {<Users />} />

これに加えて、ネストされたルートについても変更があります。

React Router v6では、「Outlet」という親ルート内で必ず使用する要素が公開され、ネストされた子コンポーネントをReact Routerの内部でレンダリングすることができます。

例えば、次のようにネストされたルートを定義することができます。

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="a" element={<Home />}>
          <Route path="b" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const Home = () => {
  return <p>Hello <Outlet /></p>;
}

const About = () => {
  return <p>welcome</p>;
}

これにより、ルート定義を複数のルート要素に分散することができ、コードをより簡単に分割できるようになります。

ただし、小規模なアプリケーションや密接に関連するネストされたコンポーネントを使用する場合は、すべてのルートを1か所で確認することが必要な場合があります。

これは、コードの可読性を向上させるのに役立ちます。

以下は、簡単なネストされたルートの例です。

const App = () =>  {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

const Users = () => {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="/" element={<UsersIndex />} />
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

React Router v6では、これらの変更により、より柔軟かつシンプルなルーティングを実現することができます。

ただし、古いバージョンのReact Routerとの互換性には注意が必要です。

React Router v5では、正確なパスまたはルートを適用する際には、'exact'プロパティを使用していました。

例えば、以下のように記述します。

<NavLink to="/index" exact>ホームに戻る</NavLink>

しかし、v6では'exact'プロパティは使用されなくなりました。その代わりに、'end'プロパティを使用して正確なルートを確保します。例えば、以下のように記述します。

<NavLink to="/index" end activeClassName="active">ホームに戻る</NavLink>

また、activeClassプロパティは、アクティブなリンクに適用されるクラス名を指定します。

以上がReact Router v5とv6で正確なパスまたはルートを適用する際のプロパティの変更点になります。

useNavigateに置き換え

React Router v5では、「useHistory」フックメソッドが使用され、プログラムで他のルートにナビゲートするために使用される履歴オブジェクトにアクセスするのに役立つメソッドでした。

しかし、React Router v6では、サスペンス対応の「useNavigate」フックに置き換えられました。

「useNavigate」フックは、前または次のページに移動したり、ユーザーを特定のURLにリダイレクトしたりするために利用できます。このフックを使用すると、変数に割り当てて簡単に使うことができます。

以下は、React Router v5とv6のそれぞれのコード例です。

import {useHistory} from 'react-router-dom';

const App = (props) => { 

  const history = useHistory(); 

  const handleClick = () => { 
    history.push('/ users'); 
  } 
  return (
<div>
<button onClick = {handleClick} > {props.label} </ button>; 
</div>
 )
}
import { useNavigate } from 'react-router-dom';

const App = (props) => {

  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/users');
  }
  return (
<div>
<button onClick={handleClick}>{props.label}</button>;
</div>
 )
}

「useNavigate」フックは非常に便利で使いやすく、React Router v6ではこれが推奨される方法になっています。

最後に

React Router v6のアップグレードに伴い、以前のバージョンからいくつかの機能が削除されました。

これは、React RouterのAPIをよりシンプルかつ効率的にするための重要なステップです。

一部の開発者にとっては、これらの変更が影響を与える可能性がありますが、React Routerの最新バージョンに移行することで、より柔軟で使いやすいAPIを利用できるようになります。

アップグレードするには、定期的にドキュメントを確認し、変更を理解することが重要です。

このように、React Router v6を最新の状態に保ち続けることで、最新の機能や最適化されたAPIを活用することができます。

総じて、React Routerのアップグレードは、開発者がReactアプリケーションをより高度なレベルで制御できるようにするための重要な進歩であると言えます。

最後まで読んで頂きありがとうございました。

当ブログの記事でReact Router v6とシームレスに連携できるようになることを願っております。

この記事が役に立ったら、ブックマークし、他の方にも共有して頂けると幸いです。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].