React Router v6の先取り

この執筆時点で、React Router v6はまだアルファ版ですが、そろそろそれを使い始め、新しい機能や今後の展開を探求するのに良い時期です。このガイドでは、新しい機能や変更点の概略をお見せします！

ご存知の通り、主要メンテナーたちは2018年初頭にReact Routerプロジェクトをフォークして、Reach Routerという軽量な代替品を作成しました。

この期間中、両方のライブラリは成長しましたが、Reach Routerのアクティブな開発は停止し、今後のReact Router v6に統合されるようです🛣

まもなくリリースされるので、これが来るもののスニークピークです！

ジャンプする…

• <Switch>は<Routes>に変わりつつあります
• 「ルート」による大きな変化
• ネストされたルートはより簡単です
• useNavigate を useHistory の代わりに使う
• 20KBから8KBへ

がになっています

このトップレベルコンポーネントは名前が変更されますが、その機能はほとんど変わりません。

// v5
import {
  BrowserRouter,
  Switch,
  Route
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/"><Home /></Route>
        <Route path="/profile"><Profile /></Route>
      </Switch>
    </BrowserRouter>
  );
}

そこに<Routes>をただ置いてください:

// v6
import {
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

ルートに関する大きな変化

v6では、<Route>コンポーネントが大きな改訂を受けています。幸いなことに、これらの新しい変更により、実際に使いやすくなります！

component/render プロパティは element プロパティの代わりに置き換えられます。

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

もし気づいていれば、v6ではプロップを渡すのがずっと簡単になりました。これにより、v5でのrenderプロップの使用が無くなりました。

ネストされたルートはよりシンプルです

v5の入れ子ルートは非常に明示的に定義する必要がありました。これにより、これらのコンポーネントに多くの文字列マッチングロジックを含める必要がありました。<Profile>を参照してください:

// v5
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

function Profile() {

  let match = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <MyProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <OthersProfile />
        </Route>
      </Switch>
    </div>
  );
}

v6では、文字列一致ロジックを削除できます。useRouteMatch()を使用する必要もありません！結果は非常にシンプルです:

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

// Approach #1
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}

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

      <Routes>
        <Route path="me" element={<MyProfile />} />
        <Route path=":id" element={<OthersProfile />} />
      </Routes>
    </div>
  );
}

// Approach #2
// You can also define all
// <Route> in a single place
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile" element={<Profile />}>
          <Route path=":id" element={<MyProfile />} />
          <Route path="me" element={<OthersProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

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

      <Outlet />
    </div>
  )
}

注：<Outlet> コンポーネントは、React Router v6 のように {this.props.children} のように使用されます。これは Reach Router からの非常に人気のある機能でした！

useNavigate を使用する代わりに useHistory を使用する

時には、プログラム的にナビゲートしたい場合があります。たとえば、ユーザーがフォームを送信した後、確認ページにリダイレクトする必要があります。これは、v5のuseHistoryライブラリで、v6ではuseNavigateに名前が変更されました。

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

function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

今や history.push() は navigate() に置き換えられます:

// v6
import { useNavigate } from 'react-router-dom';

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

場合によっては、新しいURLを追加するのではなく、ブラウザの履歴のURLを置き換えたいことがあります。これはv6で少し変更されました:

// v5
history.push('/home');
history.replace('/home');

// v6
navigate('/home');
navigate('/home', {replace: true});

20KBから8KBへ

これらすべての変更により、バンドルサイズが増加すると予想されるかもしれませんが、実際には半分に減少しました！v5の最小化されたバンドルは約20kbで、v6はわずか約8kbです。

結論

React Router v6のリリースがとても楽しみです。この記事がリリース時に期待できることについてのアイデアを与えてくれたらいいなと思います（リリースはすぐだと思います）！最新のリリースノートでReact Router v6についてもっと読むことができます📝