ピン留めされたアイテム

修正対応

こちらのStackoverflowを参考にコンポーネントを修正した。

差分は次の通り。
Routesコンポーネントでラップし、propとして表示するコンポーネントを渡すようにする。

App.jsx

-        <Route path='/'>
-         <Home />
-       </Route>
-        <Route path='/about'>
-           <About />
-        </Route>
-        <Route path='/contact'>
-          <Contact />
-        </Route>
+        <Routes>
+          <Route path='/' element={<Home />} />
+         <Route path='/about' element={<About />} />
+          <Route path='/contact' element={<Contact />} />
+        </Routes>

Retesコンポーネントを使用するためRoutesを追記する。

App.jsx

import {
  BrowserRouter as Router,
+  Routes,
  Route,
  Link
} from 'react-router-dom';

あーる 2022/05/07に更新

【エラー】A Route is only ever to be used as the child of element

おもに v6 にバージョンが上がったことによる破壊的変更によるものをまとめる

上記サイトのRouteを参考に以下のようなサンプルを作成した。（Appコンポーネント部のみ抜粋）

App.jsx

const App = () => {
  return (
    <Router>
      <div className="App">
        <h2>React Router Sample</h2>
        <p>Click on the link for routing.</p>
        <Link to='/'>Home </Link>
        <Link to='/about'>About </Link>
        <Link to='/contact'>Contact </Link>
        <hr />
        <Route path='/'>
          <Home />
        </Route>
        <Route path='/about'>
          <About />
        </Route>
        <Route path='/contact'>
          <Contact />
        </Route>
      </div>
    </Router>
  )
}

export default App