Uso react-router-dom version 6 y cuando uso this.props.history.push('/UserDashboard') no funciona. lo cambié a
const history = createBrowserHistory(); history.push('/UserDashboard') pero todavía tengo el problema de que cuando me gustaría redirigir a /UserDashboard solo cambia el enlace y la página sigue siendo la primera.
¿¿alguna ayuda??**
handleSubmit(event){ event.preventDefault(); const history = createBrowserHistory(); axios({ method: "POST", url:"http://localhost:3001/users/login", data: this.state }).then((response)=>{ console.log(response.data.user.admin) if (response.data.success === true && response.data.user.admin === false){ const history = createBrowserHistory(); history.push({ pathname:"/users", state:{ Key : response.data.user } }); }else if(response.statusCode === 401 ){ alert("Invalid username or password"); window.location.reload(false); } }) }mi archivo route.js:
import React from 'react'; import { Navigate } from 'react-router-dom'; import DashboardLayout from './Pages/DashboardLayout'; import AccountView from './Pages/views/account/AccountView'; import CustomerListView from './Pages/views/customer/CustomerListView'; import DashboardView from './Pages/views/reports/DashboardView'; import ProductListView from './Pages/views/product/ProductListView'; import SettingsView from './Pages/views/settings/SettingsView'; import Home from './Pages/home'; import About from './Pages/About'; import Partners from './Pages/Partners'; import Services from './Pages/services'; import Login from './Pages/Login'; import RD from './Pages/RD'; import ContactUs from './Pages/contactus'; import Apply from './Pages/apply'; import PartnerShip from './Pages/partnership'; import News from './Pages/News'; const routes = [ { path: 'users', element: <DashboardLayout />, children: [ { path: 'account', element: <AccountView /> }, { path: 'customers', element: <CustomerListView /> }, { path: 'dashboard', element: <DashboardView /> }, { path: 'products', element: <ProductListView /> }, { path: 'settings', element: <SettingsView /> } ] }, { path: '/', element: <Home />, }, { path: 'about', element: <About /> }, {path: 'partners', element: <Partners />, }, { path: 'services', element: <Services />, }, { path: 'contactus', element: <ContactUs />, }, { path: 'login', element: <Login />, },{ path: 'RD', element: <RD />, }, { path: 'apply', element: <Apply />, }, { path: 'partnership', element: <PartnerShip />, }, { path: 'News', element: <News />, } ]; export default routes;En react-router-dom v6, debe usar useNavigate en lugar de useHistory.
Ver ejemplo de https://reacttraining.com/blog/react-router-v6-pre/
import React from 'react'; import { useNavigate } from 'react-router-dom'; function App() { let navigate = useNavigate(); let [error, setError] = React.useState(null); async function handleSubmit(event) { event.preventDefault(); let result = await submitForm(event.target); if (result.error) { setError(result.error); } else { navigate('success'); } } return ( <form onSubmit={handleSubmit}> // ... </form> ); }Basado en el código fuente de react-router-dom, puede hacer algo como esto:
import { Router } from 'react-router-dom'; const CustomRouter = ({ basename, children, history, }) => { const [state, setState] = React.useState({ action: history.action, location: history.location, }); React.useLayoutEffect(() => history.listen(setState), [history]); return ( <Router basename={basename} children={children} location={state.location} navigationType={state.action} navigator={history} /> ); };Entonces haz que tu historia venga de fuera:
import { createBrowserHistory } from 'history'; const history = createBrowserHistory(); <CustomRouter history={history}> ... </CustomRouter>Todos sabemos que ya no hay { useHistory } en react-router-dom v6. Hay una mejor manera de hacer un trabajo de useHistory.
Primera importación useNavegar...
import { useNavigate } from 'react-router-dom';
entonces solo haz esto después de importar
function Test() { const history = useNavigate(); function handleSubmit(e) { e.preventDefault(); history('/home'); } return ( <form onSubmit={handleSubmit}> <button>Subimt</button> </form> ) }