ReactJS TypeError：无法读取未定义的属性“历史”

Question

所以我尝试做一个“服务”来帮助我完成一些小任务，我的 NavigationService.js 具有以下功能：    redirectView = (view) => {        this.props.history.push(`/${view}`)    }然后我得到了我的 Welcome.jsx，它有：<BtnRectangularBorder>    <BtnRectangular className="battle-shonen-color btn-rectangular-md-size btn-rectangular-primary" title="Cards Overview" onClick={NavigationService.redirectView("/cards-overview")} /></BtnRectangularBorder>所以现在在我的 .js 文件中，它给了我一个错误：“TypeError: Cannot read property 'history' of undefined”，我应该做 .js 文件一个组件或任何东西，因为我不承认历史

Answer 1

我猜你正在使用React Router作为你的路由解决方案。我不确定在它周围包装一个实用函数会有多大用处，因为它已经是一个实用函数。但是，如果您想这样做，则需要将当前history对象公开给函数。像这样的东西：

const NavigationService = {

  redirectView = (history, view) => {

    history.push(`/${view}`)

  }

}

const MyComponent = withRouter(({ history }) => (

  <BtnRectangularBorder>

    <BtnRectangular 

      className="battle-shonen-color btn-rectangular-md-size btn-rectangular-primary" 

      title="Cards Overview" 

      onClick={NavigationService.redirectView(history, "/cards-overview")} 

    />

  </BtnRectangularBorder>

));

通常我只是在实用程序中包装东西，但老实说，我不确定在这种情况下它会给你带来什么。希望有帮助。