Closed5

React Router v6のRouteエラー備忘録

ピン留めされたアイテム

修正対応

こちらの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';

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

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

https://v5.reactrouter.com/web/api/Route

上記サイトの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

内容としてはポートフォリオサイトなどのSPAのページ構成を想定しているサンプルとなる。

Routeでレンダリングをする際に以下のエラーがDev Toolsに出力される問題が発生した。

エラー内容は以下の通り

Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes.

日本語に翻訳すると以下のようになる。

エラー。Routeは要素の子としてのみ使用され、直接レンダリングされることはありません。RouteはRoutesでラップしてください。

エラー解決

リンクをクリックしてそれぞれのコンポーネント切り替えも問題なくできるようになった。

エラー解消後の画像

まとめ

  • React Router v6ではv5から大きな変更がいくつか含まれているため確認が必要
  • v6になりRoutesコンポーネント部分の可読性があがった(個人的に)
このスクラップは3ヶ月前にクローズされました
作成者以外のコメントは許可されていません