Este error arroja useNavigate . useInRouterContext verificará si el componente (que usa el useNavigate ) es descendiente de un <Router> .

Aquí está el código fuente para explicar por qué no puede usar useNavigate , useLocation fuera del componente Router:

useNavigate usa useLocation subyacente, useLocation obtendrá la ubicación de LocationContext . Si desea obtener el contexto de reacción, debe representar el componente como descendiente de un proveedor de contexto. El componente del Router usa LocationContext.Provider y NavigationContext.Provider . Es por eso que necesita representar el componente como los elementos secundarios, de modo que useNavigate hook pueda obtener los datos de contexto de los proveedores de NavigationContext y LocationContext .

Su entorno es el navegador, por lo que necesita usar BrowserRouter . BrowserRouter está construido en base a Router .

Refactorizar a esto:

App.jsx :

 function App() { const navigate = useNavigate(); return ( <div> <button onClick={() => navigate(-1)}>go back</button> <Nav/> <Routes> <Route exact path="/" element={<Home/>}/> <Route exact path="/home" element={<Home/>}/> <Route exact path="/upcoming/:user" element={<Upcoming/>}/> <Route exact path="/record/:user" element={<Record/>}/> <Route path="*" element={<NotFound/>}/> </Routes> </div> ); }

index.jsx :

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

Está utilizando un gancho fuera del proveedor de BrowserRouter. por eso te dan errores. Refactorice su componente como se muestra a continuación para resolver este problema

 function Root() { const navigate = useNavigate(); return ( <div> <button onClick={() => navigate(-1)}>go back</button> <Nav /> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/home" element={<Home />} /> <Route exact path="/upcoming/:user" element={<Upcoming />} /> <Route exact path="/record/:user" element={<Record />} /> <Route path="*" element={<NotFound />} /> </Routes> </div> ); } function App() { return ( <BrowserRouter> <Root /> </BrowserRouter> ); }

Tuve el mismo problema pero con la prueba de un componente que tiene el gancho useNavigate en él. Lo resolví envolviendo mi componente en una ruta con rutas y enrutador de navegador. Espero que esto ayude a otros con el mismo error.

 let container = null; beforeEach(() => { container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { // cleanup on exiting unmountComponentAtNode(container); container.remove(); container = null; }); test('finds qualified insurrance policies', () => { act(() => { render( <BrowserRouter> <Routes> <Route path="*" element= {<QuaifiedPolicies policyTypes={false} />}/> </Routes> </BrowserRouter> , container); }); expect(screen.getByLabelText('some text')) });