react-router-domに関する備忘録（2022/07現在）

React勉強中、リンク関係を実装したいと考え調べた。

色々と情報は出たものの、v5の情報が結構多くてエラーにより混乱したのでv6（現在）の情報を自分が調べた分をメモするついでに書いておく。

また、v5までの記述法を理解してないので、比較はできない。

v5との違い

<Router>の削除

v5までは<Router>で囲んでいたようだが、v6ではなくなっている。
他ファイルを引っ張る形のプログラムを見てないので判断しづらいが、かなり大きい変更に見える。

<Switch>などの関数名の変更（要検索）

見る限り、<Switch>などのURL設定や<Link>などの関数記述方法は変わってないようだ。
ただ、関数名が変更になっているので注意。

v6での記述（一例）

export default function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path={"/"} element={<Home />} />

        <Route path={"/info"} element={<Info />} />

        <Route path={"/works"} element={<Works />} />

      </Routes>

    </BrowserRouter>

  );

}

自作中のプログラムの一部である。v5でのサンプルファイルの<Switch>以下の部分が上記に該当すると考えられる。

v5のサンプルファイル抜粋

<Switch>

  <Route path="/about">

    <About />

  </Route>

  <Route path="/users">

    <Users />

  </Route>

  <Route path="/">

    <Home />

  </Route>

</Switch>

また、v5ではHome.jsのreturnを<Router>で囲むかもしれないが、v6では囲んでいない。

以降も調べると思うので、違いがわかり次第更新する。