如何使用 hookrouter 制作自定义链接组件？

Question

我正在尝试创建一个自定义路由器组件，以便我的 tr 链接到另一个页面，该页面通过该行的数据对象。当我单击链接时，我的未找到页面出现，即使我使用像“/”这样的简单路由。我为调试而制作的简化版本也有这个问题。这是我的代码：

import {setLinkProps} from 'hookrouter'

 const MyLinkButton = (props) => {
        console.log(props)
        return <button {...setLinkProps(props)} className="myButton">Click me now</button>
    }

<MyLinkButton href="/" datathing='lol'></MyLinkButton>

（我确定这是我的错误，但是我无法找到使用此库进行比较的自定义路由器组件的任何代码示例，并且我无法通过涉水理解问题源代码。）

Answer 1

你能确认你是不是作为道具传入的吗？根据代码，它看起来像是期待和对象与 href 键。您可以在 cmets 中给出的示例中看到这一点。他们明确拥有{'href': route}。在您的示例中，您看起来像是在按钮本身中手动设置 href 元素。当您单击按钮时，您的控制台是否返回任何错误？

源码中的cmets注意了

 * Accepts HTML `a`-tag properties, requiring `href` and optionally
 * `onClick`, which are appropriately wrapped to allow other
 * frameworks to be used for creating `hookrouter` navigatable links.
 *
 * If `onClick` is supplied, then the navigation will happen before
 * the supplied `onClick` action!
...
 * <MyFrameworkLink what="ever" {...useLink({ href: '/' })}>
 *   Link text
 * </MyFrameworkLink>
...
 * Accepts standard HTML `a`-tag properties. `href` and, optionally,
 * `onClick` are used to create links that work with `hookrouter`.
 * <A href="/" target="_blank">Home</A>

您的代码看起来几乎完全符合预期，所以我假设它是道具本身，而没有看到其余代码。我还会删除控制台日志并返回关键字。

您可以找到custom link component here in the documentation 的示例。