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

Share Improve this question Follow asked Oct 3, 2022 at 23:40 Arjun PArjun P 3911 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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