Estoy usando react-router-dom en mi aplicación de reacción. Cuando uso:
function App() { return ( <BrowserRouter>{ useRoutes(routes) }</BrowserRouter> ); } Y recibí un mensaje de error: Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
He buscado cómo solucionarlo y cambiar la estructura de mi código a:
function App() { return ( <BrowserRouter><Foo/></BrowserRouter> ); } function Foo() { return useRoutes(routes) }El código funciona correctamente.
Para empezar, no puedo decir la diferencia exacta entre los dos fragmentos anteriores, ¿alguien podría ayudarme?
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
Todo lo que dice este mensaje es que debe haber un proveedor de contexto de enrutamiento más alto en ReactTree que este componente de la App que está tratando de consumirlo cuando usa el useRoutes .
Un mal ejemplo más claro:
function App() { const routes = useRoutes(routes); // <-- (2) but needed here! return ( <BrowserRouter> // <-- (1) context provided here {routes} </BrowserRouter> ); } Aquí puede ver claramente que el enrutador está debajo del componente de la App y no se proporciona un contexto de enrutamiento a la App .
Esta es la razón por la que funciona el segundo fragmento, proporciona un contexto de enrutamiento más alto que el componente que lo consume.
function App() { return ( <BrowserRouter> // <-- (1) context provided here <Foo/> // <-- (2) context consumed here </BrowserRouter> ); } function Foo() { return useRoutes(routes); }