deve.K

エンジニアが未来を切り開く。

React Router v6 変更点 詳しく知る

オリジナルreactrouter画像

前の記事でReact Router v6でルーティングする記事を紹介しました。

dev-k.hatenablog.com

本日は最近『React Router』を学習されてる方々であれば、この最新バージョンであるv6を使用されてるかと思います。

このアップグレードでは様々な変更点が加わりました

ではv5とv6ではどう違うのか、どう変更されたのかを詳しく初学者様に説明していきます。

基本のおさらいをいたしましょう。

Reactルーターとは何ですか?

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

ReactのSPA(シングルページアプリケーション)には、Webページを更新せずにさまざまなビューに遷移するためのルーティング手段が必要となります。

これは、『React Router』を使用して実行できます。

公式ドキュメントには、『React Routerは、ユーザーインターフェイスを構築するためのJavaScriptライブラリであるReact用のフル機能のクライアントおよびサーバー側ルーティングライブラリとなります。

ReactRouterはReactが実行される場所ならどこでも実行できます。例えば『Web』『node.js』を使用するサーバーおよびReactNative。となります。』

それでは、変更点について詳しく説明します。

React Router v6

React Router v6は、以前のバージョンよりも大幅に小さくなっております。

圧縮されたバンドルのサイズが70%縮小されており、ツリーシェイクを有効にしバンドラー全体で実行すると、実際の出力はさらに低くなります。

アプリバンドル全体の『4kb』までしか提供しておりません。

つまり、特にネットワーク接続が遅い/貧弱な場合に、バンドルが小さいほどアプリケーションの読み込みが速くなっていきます。

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

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

React Routerを使用したことがある方々は、ルートをこの『Switch』コンポーネントにラップして一致するすべてのルートではなく、これらのルートの1つだけが同時にロードされるようにする、必要があることをご存知かもしれません。

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

return (

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

  )

v6では名前をSwitchからRoutesに変更し、Routesコンポーネントに『element』という新しいのが追加されました。

ここで、このコンポーネント内でレンダリングする必要のあるコンポーネントを渡し、次のようにします。

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

『Routes』でアプリケーション全体にそれらを分散させることが可能となり、

『Route element』で小道具としてカスタム小道具(子も含む)をルート要素にコンポーネントを渡すことができます。

つまり『Switch』v5のAPIとは異なり、v6要素の下にあるすべての値『Route path』と『Link to』は、 『Routes』でそれらをレンダリングした親ルートに自動的に相対的となっております。

なので、現在のURLに基​​づいて最も具体的なルートが最初に選択されるため、順序について心配する必要がありません。

相対パスとリンク

v6では、パスとリンクの両方が親ルートに相対的となっております。これは相対パスが必要な場合は『 / 』を省略できることを意味致します。

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

ネストされたルートではどうなるのか、

react-router v6は、『Outlet』親ルート内で使用する必要のある要素を公開し、ネストされた子をreact-router-domisnideでレンダリングできるようにします。


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>
  );
}

より簡単なネストされたルートとなりました。

v5では、正確なパスまたはルートを適用するときに、『exact』小道具を使用します。これを実装するには次のようにします。

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

v6では、『exact』は使用しません。

変わりに『end』小道具を使用して正確なルートを確保します。

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

useNavigateに置き換え

v5では『useHistory』フックメソッドを使用して他のルートにプログラムでナビゲートするために使用される、履歴オブジェクトにアクセスするのに役立つメソッドとなります。

『useHistory』フックは、サスペンス対応の

『useNavigate』フックに置き換えられています。

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

この『useNavigate』の利点としては

前または次のページに移動 ユーザーを特定のURLにリダイレクトするなどになります。

使いやすさのためにuseNavigate()関数を変数に割り当てて下さい。

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

このフックは非常に便利で使いやすいです。

React Router v6では以前の一部の機能が削除されています。

React Router v6を定期的にアップグレードし、ドキュメントを確認して変更を確認し、新しいリリースを最新の状態に保ち続けて下さい。

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

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

プライバシーポリシー