Tengo un proyecto que usa react-router v6, y recibo un error que indica que useNavigate() may be used only in the context of a <Router> component. Para algunos antecedentes, tengo dos proyectos que viven en el mismo repositorio y se construyen juntos. Aprovechamos la división de código y los importamos según sea necesario, no estoy seguro de si esto importa.

Ahora, tengo una configuración que es bastante simple:

(en el @dummyInc/components )

Dummy.tsx

 import React from 'react' export function Dummy() { const navigate = useNavigate() return <div> Hello World <button onClick={() => navigate('/someRoute')}> </div> }

Luego, mi código lo usa en un proyecto diferente que se acaba de importar.

(en el @dummyInc/site )

Aplicación.js

 import React from 'react' import Dummy from '@dummyInc/components' export function App() { return <div> <Dummy /> </div> }

índice.js

 import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router-dom' import App from './src/App' ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') )

Ahora tengo lo anterior y cuando trato de representarlo en el navegador, dice lo siguiente, pero no estoy seguro de cómo es posible, se está representando en ese contexto.

 Error: useNavigate() may be used only in the context of a <Router> component.

¿Me estoy perdiendo de algo? Cualquier ayuda es apreciada.