この記事の執筆時点では、React Router v6はまだアルファ版ですが、React Router v6を試して、今後の展開を検討する時期が近づいています。 このガイドでは、新機能/変更点を紹介します。

ご存知かもしれませんが、主任メンテナは React Router プロジェクトをフォークして、2018年の初めに ReachRouterと呼ばれる軽量の代替案を作成しました。

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

リリースが間もなくリリースされるので、これから何が行われるのかを簡単に確認できます。

ジャンプして…

になりつつある

このトップレベルのコンポーネントの名前が変更されます。 ただし、その機能はほとんど同じです。

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

ドロップするだけそこで:

// 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ではコンポーネントは最大のオーバーホールを受けています。 幸いなことに、これらの新しい変更により、実際には使いやすくなります。

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のネストされたルートは、非常に明示的に定義する必要がありました。 これには、これらのコンポーネントに多くの文字列照合ロジックを含める必要がありました。 見る

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

注: コンポーネントは次のように使用されます{this.props.children} ReactRouterv6で。 これはReachRouterの非常に人気のある機能でした。

useHistoryの代わりにuseNavigate

プログラムでナビゲートしたい場合があります。 たとえば、ユーザーがフォームを送信した後、確認ページにリダイレクトする必要があります。 これは、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です。

Screenshot: React router v5 vs v6

バンドルサイズは、BundlePhobiaツールを使用して計算されます。

結論

ReactRouterv6のリリースにとても興奮しています。 うまくいけば、この記事がリリースされたときに何を期待するかについてのアイデアをあなたに与えてくれました(これはすぐに来るはずです)! React Router v6の詳細については、最新のリリースノートをご覧ください📝

新機能の完全なリストについては、公式の ReactRouterv6移行ガイドを参照してください🚏