useRoutes() may be used only in the context of a <Router> component. エラーが起こる問題について

3308 ワード
React ReactRouter React テキストリンク

自分がハマったので記録に。
react-router-dom のv6を利用する際に

ReactDOM.render(
  <Routes>
    <Route exact path='/' element={<Top/>} />
    <Route path='/App' element={<App/>} />
  </Routes>,
  document.getElementById('root')
);

この書き方をしたところ、Chromeのデバッグツールで

useRoutes() may be used only in the context of a <Router> component.

というエラーが起こった。

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route exact path='/' element={<Top/>} />
      <Route path='/App' element={<App/>} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

BrowserRouterタグで囲んであげることで解決した。