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> ponent.

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

import Links from "./ponents/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;

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> ponent.

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

import Links from "./ponents/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;

• javascript
• reactjs
• react-router
• jsx

1 Answer 1

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

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 ponent API from v5 to v6.

Example:

import Links from "./ponents/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 ponent
      <div>
        <h1>Chose your operation:</h1>
        <div className="cards">
          <Routes>
            <Route
              path="/addition"
              element={<Addition />} // <-- passed as JSX
            />
          </Routes>
        </div>
      </div>
    </Router>
  )
}