Error when put <BrowserRouter> and useRoutes(routes) in A function component in React

user_13533290 0
Viewed 635

I'm using react-router-dom in my react app. When I use:

function App() {
    return (
        <BrowserRouter>{ useRoutes(routes) }</BrowserRouter>
    );
}

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

I've searched how to fix it and change my code's structure to:

function App() {
    return (
        <BrowserRouter><Foo/></BrowserRouter>
    );
}
function Foo() { 
    return useRoutes(routes)
}

The code works properly.

As a starter, I can't tell the exact difference between the two snippet above, could someone please help?

jsx react-router reactjs javascript
2 Answers
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.

All this message is saying is that there needs to be a routing context provider higher in the ReactTree than this App component that is trying to consume it when using the useRoutes hook.

A clearer bad example:

function App() {
  const routes = useRoutes(routes); // <-- (2) but needed here!
  return (
    <BrowserRouter> // <-- (1) context provided here
      {routes}
    </BrowserRouter>
  );
}

Here you can clearly see that the router is below the App component and there is no routing context provided to App.

This is why the second snippet works, it's providing the routing context higher than the component consuming it.

function App() {
  return (
    <BrowserRouter> // <-- (1) context provided here
      <Foo/> // <-- (2) context consumed here
    </BrowserRouter>
  );
}

function Foo() { 
  return useRoutes(routes);
}
user_86908570

Here's another example where the error was thrown and was fixed thanks to @drew-reese's explanation:

create-react-app builds the following TypeScript test file:

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

The fix is to include BrowserRouter

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

and to wrap <App /> to get the routing context:

render(<BrowserRouter><App /></BrowserRouter>);
user_137783400
Related