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

Question

我正在尝试创建一个自定义路由器组件，以便我的tr链接到通过该行的数据对象传递的另一个页面。当我点击这个链接时，我的not found页面就会出现，即使我使用'/‘这样的简单路径。我在为调试而制作的简化版本中也遇到了这个问题。下面是我的代码：

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键的期望和对象。您可以在注释中给出的示例中看到这一点。它们显式地具有{'href': route}。在您的示例中，您看起来像是在手动设置按钮本身中的href元素。当您单击该按钮时，您的控制台是否返回任何错误？

源代码中的注释注意到它

 * 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的示例。