Cuando estaba usando BrowserRouter de react-router-dom, Mis rutas estaban funcionando. Pero para usar el historial personalizado, reemplacé BrowserRouter con Router de react-router. Después de eso, mis componentes de ruta no se cargan correctamente, pero la URL cambia correctamente. Aquí están mis códigos:
AppRouter-JS:----
import React from 'react'; import { Router, Route, Switch} from 'react-router'; // import { BrowserRouter as Router,Route, Switch} from 'react-router-dom'; import {createBrowserHistory} from 'history' import Header from '../components/Header.js'; import Dashboard from '../components/DashboardPage.js' import CreateExpense from '../components/CreateExpensePage.js'; import EditExpense from '../components/EditExpensePage.js'; import Help from '../components/HelpPage.js'; import PageNotFound from '../components/PageNotFound.js' import LoginPage from '../components/LoginPage.js' export const history = createBrowserHistory(); const AppRouter = ()=>( <Router history={history}> <div> <Header/> <Switch> <Route path='/' exact={true} component={LoginPage}/> <Route path='/dashboard' component={Dashboard}/> <Route path='/create' component={CreateExpense} /> <Route path="/edit/:id" component={EditExpense}/> <Route path='/help' component={Help} /> <Route component={PageNotFound}/> </Switch> </div> </Router> ) export default AppRouter;HeaderJS:-- (Aquí tenemos los NavLinks)
import React from 'react'; import {NavLink, Link} from 'react-router-dom'; import {connect} from 'react-redux'; import {LogoutAction} from '../Redux/Actions/AuthActions.js' export const Header = ({logoutAction})=>( <header> <h1>Expense Tracker</h1> <p><NavLink exact activeClassName='active-class' to='/'>Home Page</NavLink></p> <p><NavLink activeClassName='active-class' to='/create'>Add Expense</NavLink></p> <p><NavLink activeClassName='active-class' to='/help'>Help Page</NavLink></p> <button onClick={logoutAction}>Logout</button> </header> ); const mapDispatchToProps = (dispatch)=> { return { logoutAction: ()=> dispatch(LogoutAction()) } } export default connect(undefined,mapDispatchToProps) (Header);Después de hacer clic en cualquier NavLink o Link, siempre se abre el componente PageNotFound.
De hecho, acabo de encontrar mi problema, y podría ser el tuyo también.
Estaba en react-router-dom@5.2.0 y history@5.0.0 .
react-router 5x es compatible con la historia 4x. Una vez que bajé a history@4.10.1 todo empezó a funcionar.
Usé history.goBack("/signup") no history.push("/signup") parece funcionar para mí.
Ahora usando el gancho useNavigate() en lugar de useHistory() o cualquier cosa relacionada con la historia.
Puedes usar así;
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
navigate('/detail')
Nota: Escrito para actualizar la información.