React router error "useRoutes() may be used only in the contect of a <Router> component.&-CodePudding

So, I was making this website when I saw these BIG red errors in the console ( I know a nightmare :( ) The error said this:

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

And I didn't even use a "useRoutes" hook. Anyways here's my code:

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;

CodePudding user response：

The Routes component uses the useRoutes. Routes needs to be rendered within a routing context provided by a router component.

Additionally the Addition (sorry, no pun intended) needs to be passed to the element prop as JSX. This was one of the breaking changes in the Route component API from v5 to v6.

Example:

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>
  )
}