Tengo este enrutador en mi App.js:

{amp}lt;Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path="/" exact component={HomePage} /{amp}gt; {amp}lt;Route path="/login" component={Login} /{amp}gt; {amp}lt;Route path="/editProject" /*render={(props) ={amp}gt; {amp}lt;ProjectEdit {...props} history={props.history} /{amp}gt;}*/ component={ProjectEdit} /{amp}gt; {/*{amp}lt;Redirect path="*" to="/" /{amp}gt;*/} {amp}lt;/Switch{amp}gt; {amp}lt;/Router{amp}gt; 

Desde el componente HomePage estoy usando el componente {amp}lt;ProjectsList{amp}gt; que tiene componentes {amp}lt;Project{amp}gt;. Dentro del componente {amp}lt;Proyecto{amp}gt; tengo una opción del menú para Editar un proyecto y estoy tratando de usarlo allí:

  {amp}lt;OverflowMenuItem itemText="Edit" href="#" onClick={ () ={amp}gt; this.props.history.push('/editProject')}/{amp}gt; 

¡Pero estoy entendiendo que los accesorios no están definidos!

Pasé los props.history como prop history= {this.props.history} en este orden:

Página de inicio -{amp}gt; Lista de proyectos -{amp}gt; Proyecto

Si está trabajando con un componente funcional, simplemente puede acceder al objeto de instancia de historial dentro de su componente utilizando el useHistory , como se indica en la documentación de React-Router.

 import { useHistory } from 'react-router-dom'; function HomeButton() { let history = useHistory(); function handleClick() { history.push("/home"); } return ( {amp}lt;button type="button" onClick={handleClick}{amp}gt; Go home {amp}lt;/button{amp}gt; ); } 

Si está trabajando con un Componente de clase, puede ajustar su componente con withRouter y luego acceder al objeto de historial dentro de su componente

 import { withRouter } from 'react-router'; class YourComponent extends React.Component { render() { const { history } = this.props; return {amp}lt;OverflowMenuItem itemText="Edit" href="#" onClick={ () ={amp}gt; history.push('/editProject')}/{amp}gt;; } } export default withRouter(YourComponent);