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：无法读取未定义的属性‘历史’”，

我应该做 .js 文件一个组件或任何东西，因为在 doenst 识别历史

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>
));

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