開発者ドキュメント

Reactルーターv6のスニークピーク

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

The 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では小道具を渡すのがはるかに簡単になりました。 これにより、 render v5の小道具。

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

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

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

// 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です。

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

結論

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

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

モバイルバージョンを終了