0
1.3K
ViewsuseNavigate() solo se puede usar en el contexto de un componente <Router>
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.
3 answers
Answer question0
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') )0
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> ); }0
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')) });