React RouterのLinkでURLは変わるが画面が遷移しない

Question

問題

現在Reactを学習しています。リロードせずに画面遷移する方法としてReact Routerを知ったので、自分が開発中のアプリに組み込みました。
しかし、Linkタグをクリックするとブラウザ上のURLは変化するものの、遷移先の内容が表示されません。Linkタグを押したのちにページをリロードすると変化したURLのページを読み込んではくれます。

やってみたこと

他の部分が影響しているのではと思い、この記事を参考に最小限の部分のみ作成したのですが、同様に遷移してくれませんでした。

環境

環境は以下の通りです。
OS:macOS
ブラウザ:Google Chrome(Safariでも症状は変わらず)
node: v16.15.0

├── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.1.1
├── @testing-library/user-event@13.5.0
├── react-dom@18.1.0
├── react-router-dom@5.3.1
├── react-scripts@5.0.1
├── react@18.1.0
└── web-vitals@2.1.4

react-router-domについては、記事内でSwitchを用いており、6以降のバージョンではSwitchが使用できないと目にしたので5系をインストール済。

コード

% npx create-react-app react-router-practice
% cd react-router-practice
% npm install react-router-dom@5

でプロジェクトを作成してrect-router-domをインストールしたのち、App.jsのみ以下のように変更しました。

import "./App.css";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <h1>Hello</h1>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/contact">
          <Contact />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}
function Contact() {
  return <h2>Contact</h2>;
}

export default App;

よろしくお願いします。

Answer 1

React18＋React.StrictModeの時に発生するバグのようです。

https://github.com/facebook/react/issues/21674

とりあえず、index.jsの<React.StrictMode />を削除して<App />だけにすれば動くようになると思います。

ただ、v5は今後サポートがほとんどされない可能性が高く、StrictModeも極力外さない方が良いと思うので、個人的にはこれを機にv6を使って見ることをお勧めしたいです。
もちろん、学習負荷が高ければ、現時点ではStrictModeを外してv5で学習して、次のステップでv6を使ってみるというのもありだと思います。

Comments

[Dearg]

ありがとうございます！
参考にしていた記事がv5だったためv5を用いていたのですが、そういった問題があるのですね。
v6を入れ直して無事問題なく動作させることができました！