Mi código actualmente es este y estoy tratando de agregar este botón que regresa a la página anterior usando react-router-dom pero aparece un error que dice 'useNavigate() puede usarse solo en el contexto de un componente'. y también desaparecen todos los componentes de mi sitio web.
function App() { const navigate = useNavigate(); return ( <BrowserRouter> <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> </BrowserRouter> ); }
Este es el error que tengo en la consola.
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')) });