反应路由器错误“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>
  )
}