反應路由器錯誤“useRoutes（）只能用於<router>成分。”</router>

Question

所以，當我在控制台中看到這些大紅色錯誤時，我正在制作這個網站（我知道這是一場噩夢：（）錯誤是這樣說的：

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

而且我什至沒有使用“useRoutes”鈎子。 無論如何，這是我的代碼：

import Links from "./components/Links"
import Addition from "./pages/Addition"
import "./styles/App.css"
import { BrowserRouter as Router, Switch, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <h1>Chose your operation:</h1>
      <div className="cards">
        <Routes>
          <Route path="/addition" element={Addition} />
        </Routes>
      </div>
    </div>
  )
}

export default App;

Answer 1

Routes組件使用useRoutes 。 Routes需要在路由器組件提供的路由上下文中呈現。

此外， Addition （抱歉，沒有雙關語）需要作為 JSX傳遞給element屬性。 這是Route組件 API 從 v5 到 v6 的重大更改之一。

例子：

import Links from "./components/Links"
import Addition from "./pages/Addition"
import "./styles/App.css"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router> // <-- render app into Router component
      <div>
        <h1>Chose your operation:</h1>
        <div className="cards">
          <Routes>
            <Route
              path="/addition"
              element={<Addition />} // <-- passed as JSX
            />
          </Routes>
        </div>
      </div>
    </Router>
  )
}