I'm trying to migrate one class component to function with hooks but i have a problem when try to change the url with my history.push.

With my class component this is the way to change the url:

  constructor(props) {

    super(props)

    this.state = {
     // GeneralValidate: false,
      paisValue: '',
      paisError: true,
      loading: false,
      tipo: '',
  };

  }


.//more code here


 this.props.history.push({
  pathname: '/Pais',
  state: { detail: 'hola' }
})

And works fine but in my function component the props its empty and i dont know how i cant use the history.push.

 const PaisForm = (props) => { 
 props.history.push("/Pais")
}

What i'm doing wrong? Thanks and sorry for the issues!

I'm trying to migrate one class component to function with hooks but i have a problem when try to change the url with my history.push.

With my class component this is the way to change the url:

  constructor(props) {

    super(props)

    this.state = {
     // GeneralValidate: false,
      paisValue: '',
      paisError: true,
      loading: false,
      tipo: '',
  };

  }


.//more code here


 this.props.history.push({
  pathname: '/Pais',
  state: { detail: 'hola' }
})

And works fine but in my function component the props its empty and i dont know how i cant use the history.push.

 const PaisForm = (props) => { 
 props.history.push("/Pais")
}

What i'm doing wrong? Thanks and sorry for the issues!

• javascript
• reactjs

• Are you wrapping your functional component in a withRouter hoc? – Dupocas Commented Sep 26, 2019 at 17:52
• Connect with withRouter or pass history object from parent – Jaisa Ram Commented Sep 26, 2019 at 17:53

3 Answers 3

props.history and props.location are special props injected by withRouter, it works for class and functional components

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

export const Component = withRouter(({ history, location }) =>{

})

class Comp extends Component {
    render(){
        const { location, history } = this.props
    }
}
export default withRouter(Comp)

1st:

import {withRouter} from "react-router-dom"

and wrap your component

export default withRouter (PaisForm);

2nd:

or pass history object from parent if parent has access to history, like below :

<PaisForm history={this.props.history}/>

3rd:

Use useHistory hooks from router

import { useHistory } from 'react-router';

function PaisForm (props){
  const history = useHistory();

  return <button onClick={()=> history.push('/path')}>click</button>
}

Fixed typo

You can either wrap your component with the withRouter Higher-Order-Component, which will provide history as a prop:

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

const Component = ({ history, ...props }) => {

    /* ... */

    history.push('/');

}

withRouter(Component);

Or you can use the hooks that came with the latest update (v5.1.0). With these you do not have to wrap your functional component inside a HOC.

Available hooks are useHistory (history prop), useLocation (location prop), useParams (params object of match prop) and useRouteMatch (match prop).

import { useHistory } from `react-router`;

const Component = (props) => {
    const history = useHistory();

    /* ... */

    history.push('/');
}