Cuando trato de navegar por el historial de mi proyecto, parece que no funciona para renderizar otros componentes.
import React from 'react'; import Login from './components/Login.jsx'; import Register from './components/Register'; import Apuntes from './components/Apuntes'; import history from './history/history'; import { Router } from 'react-router'; import { Route } from 'react-router-dom'; export function App() { return ( <Router history={history}> <Route exact path='/login' component={Login} /> <Route exact path='/register' component={Register} /> <Route exact path='/apuntes' component={Apuntes} /> </Router> ); }Luego, en mi clase de inicio de sesión, llamo a history.push('/apuntes') y cambia la URL pero no hace nada más. El history.js es este:
import { createBrowserHistory } from 'history'; export default createBrowserHistory();Me gustaría saber cómo solucionar esto y hacer que muestre el componente según la URL.
esto funcionará :)
//import your components here import {BrowserRouter as Router,Route, Switch, useHistory } from "react-router-dom"; export function App() { const history = useHistory(); if (true) { // any condition you need here history.push("/login"); return ( <Switch> <Router> <Route exact path='/login'><Login/></Route> <Route exact path='/register'><Register/></Route> <Route exact path='/apuntes'><Apuntes/></Route> </Router> </Switch> ); }además, puede definir una ruta como predeterminada agregando esta ruta al final de las rutas.
<Route path="/"> <YourDefaultComponent/> </Route>