Programmatically navigating in React-Router v4

by

You are using react-router v4, so you need to use withRouter with your component to access the history object’s properties, then use history.push to change the route dynamically.

withRouter:

You can get access to the history object’s properties and the closest
‘s match via the withRouter higher-order component. withRouter
will re-render its component every time the route changes with the
same props as render props: { match, location, history }.

Like this:

import {withRouter} from 'react-router-dom';

class WelcomeForm extends Component {

    handleSubmit = (e) => {
        e.preventDefault()
        if(this.validateForm())
            this.props.history.push("/life");
    }

    render() {
        return (
            <form className="WelcomeForm" onSubmit={this.handleSubmit}>
                <input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/>
            </form>
        )
    }
}

export default withRouter(WelcomeForm);

More Related Contents:

  1. How to push to History in React Router v4?
  2. Nesting Routes in react-router v4
  3. React Router v4 – How to get current route?
  4. Detect Route Change with react-router
  5. Simple Conditional Routing in Reactjs
  6. Nested Routes not rendering with React Router v4
  7. Use history.push in action creator with react-router-v4?
  8. React Router 4 Nested Routes not rendering
  9. React router 4 does not update view on link, but does on refresh
  10. How to nest routes in React Router v4?
  11. React Router work on reload, but not when clicking on a link
  12. React : difference between and
  13. Nested routes with react router v4 / v5
  14. How to pass params with history.push/Link/Redirect in react-router v4?
  15. React Router v4 renders multiple routes
  16. react router difference between component and render
  17. Why do I get the error “expressions must have one parent element”, how do I fix this?
  18. You should not use outside a
  19. How do I pass state through React_router?
  20. react router v4 default page(not found page)
  21. Invariant failed: You should not use outside a
  22. React Router Dom v6 shows active for index as well as other subroutes
  23. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  24. React router, pass data when navigating programmatically?
  25. react routing is able to handle different url path but tomcat returns 404 not available resources
  26. Detect change in query param react-router-dom v4.x and re-render component
  27. React: Hide a Component on a specific Route
  28. React Router v4 with multiple layouts
  29. Passing values through React-Router v4
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment