score:2
I'm surprised you're not seeing any errors for a couple reasons:
react-router-dom
v6 no longer exposes ahistory
object to use for navigation. It's replaced with auseNavigate
hook that returns anavigate
function.react-router-dom
v6Route
components also no longer pass any route props (i.e.history
,location
, andmatch
), they just don't exist. In other words,this.props.history
is undefined and should throw an error when attempting to invoke thepush
function.
Since Login
is a class component you'll need to create your own custom withRouter
component to grab the navigate
function and pass it to Login
as a prop.
const withRouter = Component => props => {
const navigate = useNavigate();
return (
<Component {...props} navigate={navigate} />
);
};
...
class Login extends Component {
constructor(){
super();
this.state = {
email: '',
password: '',
errors: {}
}
}
handleSubmit = (event) => {
event.preventDefault();
const userData = {
email: this.state.email,
password: this.state.password
}
axios
.post("/loginUser", userData)
.then(res => {
console.log(res.data);
localStorage.setItem('FBIdToken', `Bearer ${res.data.token}`);
this.props.navigate('/');
})
.catch((err) => {
console.log("ERROR inside loginUser.js");
})
}
...
render() {
...
return (
...
)
}
}
export default withRouter(Login);
Source: stackoverflow.com
Related Query
- Constructor props equivalent in React Hooks for history push
- History push undefined when using props within Axios getData in React
- How to push to History in React Router v4?
- What is the trade off between history push and replace?
- Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
- react router doesn't re-render after history push
- See list of history through react-router props
- How to push to History in React Router v5?
- ReactJS Router- How to use history push within function component with parameters?
- reactjs: connected-router is not redirecting the user after push call is made
- React Router BrowserRouter History Push & Google Analytics
- Is a function passed as props in this code?
- How to pass params into history push
- reactJS history push returns an error
- Is this a good way to pass props to child component in React?
- this.props.history.push("/") isn't redirecting me to homepage
- How can I scroll to a page when doing React Router history push in my case
- Missing the location, history and match properties when combining custom props with RouteComponentProps
- How to push props to a new page on button click?
- React Router navigation using history push
- Why is there a semi-colon in the object structure for expected props in this typescript react component?
- Why can't i call props in this Method? (react)
- How to Redirect particular url to homepage instead of redirecting to 404 using gatsby?
- How and where can I add testid props to this code
- How can I solve this problem 'No duplicate props allowed react/jsx-no-duplicate-props'
- How can i access the history object inside of this promise call?
- ReactJS this props is not a function
- Push history at actions react-router v4 doesn't navigate
- push function changes props in react
- Need help on looping through this state and showing the props
More Query from same tag
- JS & ES6: Access static fields from within class
- Why is `npm init react-app` using yarn as default? (npm V6.14.5)
- How do I add validation to the form in my React component?
- React State not updating and getting reset to original state
- MERN POST request to update user does not update to database
- How to inherit style from another component?
- ECMA7 static prototypes is not yet supported in Meteor, what is a good workaround?
- Executing JavaScript client written code on server side of an application
- How to print json api data in reactjs
- material ui styling not applying
- How to divide array into two arrays depending on condition?
- React.js is not applying styles from my .sass file
- Prevent user from returning to previous screen StackNavigator
- How do I solve an error in my React Button Component?
- reactjs - app doesn't change state after getting data from api
- append material ui snackbar to body
- switch icons on button click in react
- React-Widgets DateTimePicker: Prevent keyboard input or copy pasting
- React: Capture Select Option that is Automatically Set
- testing-library Error: mockConstructor(...): Nothing was returned from render
- transform a js object into a new object with an other fotm
- How to organize material-ui Grid into rows?
- How to clear uncontrolled field in react
- Losing a part of my state in Redux Toolkit
- Unable to Write in MUI SearchBar
- How to Set arrow controls to a custom button
- How to test styling using Jest
- Table with n * rows and fixed number of columns
- Reactjs append an element instead of replacing
- react-datepicker styles are not being not applied on deployed build