将历史传递到路由器中定义的组件

Question

我的 App.js 中有这个路由器：

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

从 HomePage 组件我使用 < ProjectsList> 组件，其中有 < Project> 组件。在 < Project> 组件中，我有一个用于编辑项目的菜单选项，我正在尝试在那里使用：

 <OverflowMenuItem itemText="Edit" href="#" onClick={ () => this.props.history.push('/editProject')}/>

但我发现道具是未定义的！

解析度：

我history= {this.props.history}按以下顺序将 props.history 作为道具传递：

首页->项目列表->项目

Answer 1

如果您正在使用功能组件，则可以使用useHistory钩子简单地访问组件内的历史实例对象，如 React-Router文档中所述。

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


function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

如果您正在使用类组件，您可以使用 包装您的组件withRouter，然后访问您的组件中的历史对象

import { withRouter } from 'react-router';

class YourComponent extends React.Component {

  render() {
    const { history } = this.props;

    return <OverflowMenuItem itemText="Edit" href="#" onClick={ () => history.push('/editProject')}/>;
  }
}

export default withRouter(YourComponent);