I use react-router-dom version 6 and when I use this.props.history.push('/UserDashboard') it does not work. I changed it to
const history = createBrowserHistory();
history.push('/UserDashboard')
but I still have a problem that when i would like to redirect to /UserDashboard just the link change and the page still the first one??
any help??**
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);
}
})
}
my routes.js file:
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;
In react-router-dom v6, you need to use useNavigate rather than useHistory.
See example from 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>
);
}
Based on react-router-dom source code, you may do something like this :
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}
/>
);
};
Then make your history come from outside :
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
<CustomRouter history={history}>
...
</CustomRouter>
Another solution if you're still using class components in react v6+, is injecting the new navigate object as history. This gets around the pesky problem of not being able to use navigate() within a class component, though you should try to move away from class components in the future. I found myself in this predicament with a large codebase as I'm sure others still are.
import React, { Component } from "react";
import { useNavigate } from "react-router-dom";
class MyClass extends Component {
handleClick(e) => {
this.props.history('place-to-route');
}
}
export default (props) => (
<MyClass history={useNavigate()} />
);
We all know there is no longer { useHistory } kind of thing in react-router-dom v6. There is better a way to do a work of useHistory.
First import useNavigate ...
import { useNavigate } from 'react-router-dom';
then just do this after importing
function Test() {
const history = useNavigate();
function handleSubmit(e) {
e.preventDefault();
history('/home');
}
return (
<form onSubmit={handleSubmit}>
<button>Subimt</button>
</form>
)
}
You can use the solution described in
[https://reactnavigation.org/docs/use-navigation/][1]
class MyBackButton extends React.Component {
render() {
// Get it from props
const { navigation } = this.props;
}
}
// Wrap and export
export default function(props) {
const navigation = useNavigation();
return <MyBackButton {...props} navigation={navigation} />;
}Reactjs v6 has come with useNavigate instead of useHistory.
=> firstly, you have to import it like this: import {useNavigate} from 'react-router-dom'.
=> then you only can you use it under a react functional component like this:
const navigate = useNavigate();
=> And then which route you want to navigate, just put that route name like this:
navigate("/about");
example: if you want to navigate to the about page after clicking a button.Then you should put
navigate("/about") under this onClick event:
<button onClick = {()=>navigate("/about")}>go to about page
thanks.