React Router V6 - Error: useRoutes() may be used only in the context of a component

Question

I have installed react-router-domV6-beta. By following the example from a website I am able to use the new option useRoutes I have setup page routes and returning them in the App.js file.

After saving I am getting the following error:

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

I am wondering If I am missing something here? I have created the pages inside the src/pages folder.

My code:

import { BrowserRouter, Link, Outlet, useRoutes } from 'react-router-dom';

// Pages
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Gallery from './pages/Gallery';
import Prices from './pages/Prices';
import Contact from './pages/Contact';

const App = () => {
    const routes = useRoutes([
        { path: '/', element: <Home /> },
        { path: 'o-nama', element: <About /> },
        { path: 'usluge', element: <Services /> },
        { path: 'galerija', element: <Gallery /> },
        { path: 'cjenovnik', element: <Prices /> },
        { path: 'kontakt', element: <Contact /> }
    ]);

    return routes;
};

export default App;

score 139 · Accepted Answer · answered Nov 01 '21 at 11:05

139

You should have a <BrowserRouter> (or any of the provided routers) higher up in the tree. The reason for this is that the <BrowserRouter> provides a history context which is needed at the time the routes are created using useRoutes(). Note that higher up means that it can't be in the <App> itself, but at least in the component that renders it.

Here's what your entry point could look like:

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

answered Nov 01 '21 at 11:05

tavoyne

5,591
2
14
24

This appears to be untrue. https://github.com/remix-run/react-router/blob/dev/examples/basic/src/App.tsx – Richard Barraclough Mar 10 '23 at 15:04
Look at main file https://github.com/remix-run/react-router/blob/dev/examples/basic/src/main.tsx – Dmitry Masley Apr 19 '23 at 13:38

score 98 · Answer 2 · edited Apr 27 '22 at 14:38

I think the problem is that you still need to wrap routes (Routes / useRoutes) inside a Router element.

So an example would look something like this:

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useRoutes,
} from "react-router-dom";

const Component1 = () => {
  return <h1>Component 1</h1>;
};

const Component2 = () => {
  return <h1>Component 2</h1>;
};

const App = () => {
  let routes = useRoutes([
    { path: "/", element: <Component1 /> },
    { path: "component2", element: <Component2 /> },
    // ...
  ]);
  return routes;
};

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWrapper;

Refactor according to your needs.

The `BrowserRouter as Router,` was missing on my side. – Florian Oct 15 '21 at 11:47 — Florian, Oct 15 '21 at 11:47

score 13 · Answer 3 · edited Feb 02 '21 at 20:56

13

its means in Your index js Or App JS wrap with BrowserRouter like this

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <BrowserRouter>  // Like This here I am using
                <App />
           </BrowserRouter>
       </Provider>
    </React.StrictMode>,
    document.getElementById("root"),
);

edited Feb 02 '21 at 20:56

Joundill

6,828
12
36
50

answered Feb 02 '21 at 20:24

Jagtar Singh

171
4

score 12 · Answer 4 · answered Apr 07 '21 at 10:17

12

Mention below code in index.js

import { BrowserRouter as Router } from "react-router-dom";

answered Apr 07 '21 at 10:17

Sagar M

1,168
13
10

score 6 · Answer 5 · answered Mar 16 '22 at 14:28

Code: index.js

import {BrowserRouter as Router}  from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
  <Router>
    <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

app.js

function App() {
  return (
  <>
    <Routes>
    <Route path ="/" element={<Main />} />
    <Route path ="gigs" element={<Gigs />} />
    </Routes>
</>
  );
}

score 4 · Answer 6 · answered Nov 17 '22 at 15:39

Try to add your routes in index.js not in App.js. Your App.js is called from index.js. In the index.js your external page is called like this

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navbar />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

score 3 · Answer 7 · answered Jan 11 '22 at 00:04

3

Just want to report on a similar issue -- as of writing (v6.2.1), it seems you actually encounter this error as well if you are importing from react-router instead of react-router-dom. A costly typo on my part.

I.e., make sure you are importing Routes and Route from react-router-dom and NOT react-router

// This is deceptively valid as the components exist, but is not the intended usage
import { Routes, Route } from 'react-router';

// This works and is the intended usage
import { Routes, Route } from 'react-router-dom';

answered Jan 11 '22 at 00:04

Wallace

259
2
7

As funny as it seems this is actually a valid solution, my app crashes because of this simple mistake. Thanks – Lukman Isiaka Mar 25 '22 at 23:24
This. My project worked fine through v6.3.0 of React Router, but as soon as I upgraded to 6.4.x, kaboom. Thanks for the fix on a very sticky problem! – Crates Sep 28 '22 at 21:12

score 1 · Answer 8 · answered Mar 29 '22 at 20:46

> Following codes works since react-router-dom syntax changed because of React 18.

  import logo from './logo.svg';
    import './App.css';
    import Header from './components/Header';
    import Login from './components/Login';
    import {
      BrowserRouter as Router,
      Routes,
      Route,
      useRoutes,
    } from 'react-router-dom';
    import Signup from './components/Signup';
    
    function AppRoutes() {
      const routes = useRoutes(
        [
          {path:'/',element:<Login/>},
          {path:'/signup',element:<Signup/>}
        ]
      )
      return routes;
    }
    function App(){
      return (
        <Router>
          <Header/>
          <AppRoutes />
        </Router>
      )
    }
    
    export default App;

Haris Bin Talat · Answer 9 · 2022-11-15T08:18:58.420

0

Try

const Routes = () => useRoutes([])

and then wrap it like this in App.js

<BrowserRouter> 
    <Routes />
</BrowserRouter>

It worked for me

edited Nov 15 '22 at 08:18

answered Nov 15 '22 at 08:18

Haris Bin Talat

1
1

score 0 · Answer 10 · answered Feb 06 '23 at 04:05

0

I got this error because I had two different versions of react-router-dom being bundled.

If you're using npm/yarn workspaces, check that there is only one installed version of react-router-dom in the top-level node_modules folder

answered Feb 06 '23 at 04:05

Flion

10,468
13
48
68

React Router V6 - Error: useRoutes() may be used only in the context of a component

10 Answers10

Linked

Related