Question

我具有功能组件，该组件可以渲染带有背景图像的div，并希望在用户单击时重定向到详细信息页面。

const Card = (post: Post) => (
  <div className="card">
    <div className="card-image"></div>

    <div className="card-inner">
      <h4 className="card-title">
        <Link to={`/post/${post.id}`}>{post.title}</Link>
      </h4>
    </div>
  </div>
);

export default Card;

在h4中的链接可以正常工作，但是对于div.card-image，我想我需要使用一些history.push，所以我发现我必须使用withRouter（{{3} }），但是我是新来的反应和现代JS，不知道该怎么写。

我曾这样尝试过，但这会导致属性错误：

const Card = withRouter(({history, ...post}) => (
  <div className="card">
    <div className="card-image"></div>

    <div className="card-inner">
      <h4 className="card-title">
        <Link to={`/post/${post.id}`}>{post.title}</Link>
      </h4>
    </div>
  </div>
);

export default Card;

Property 'title' does not exist on type '{ location: Location<any>; match: match<any>; staticContext?: StaticContext | undefined; children?: ReactNode; }'.ts(2339)

如果我在参数中添加类型

withRouter(({history, ...post : Post}) => (

我只有其他警告：

'Post' is declared but its value is never read.ts(6133)

编辑：还没有用于实际重定向的代码，因为起初我需要知道如何正确使用withRouter。

如何重定向带有打字稿的react功能组件中的点击？

0 个答案: