How do I make a custom link component with the hookrouter?

Question

I am trying to create a custom router component so that my tr links to another page passing through the data object for that row. When I click the link my not found page comes up, even when I use simple routes like '/'. I also had this issue with simplified versions I made for debugging. Heres my code:

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>

(Im sure that it's an error on my part, however I haven't been able to find any code example for custom router components using this library to compare with, and I was not able to understand the issue by wading through the source code.)

score 0 · Answer 1 · answered Mar 07 '20 at 23:42

0

Can you confirm if you are passing in as props? Based on the code, it looks like it is expecting and object with the href key. You can see this in the example given in the comments. They explicitly have {'href': route}. In your sample, you look like you are manually setting the href element in the button itself. Does your console return any errors when you click on the button?

The comments in the source code note that it

 * 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>

Your code looks like it is almost exactly what is being expected, so I assume that it is the props themselves without seeing the rest of the code. I would also remove the console log and return keywords.

You can find an example of the custom link component here in the documentation.

answered Mar 07 '20 at 23:42

adlopez15

3,449
2
14
19

Props logs as exactly that, an object with href and datathing as keys. I tried passing an object with an href key and path value directly into the setLinkProps function as well, without any difference in results. – Quddus George Mar 07 '20 at 23:54
1

I attempted to reproduce an example here: https://codesandbox.io/s/recursing-goldberg-hfnej. Is this the same thing you are running into? I see that it does not register the click to open the href. – adlopez15 Mar 08 '20 at 00:38
Routing seems to work if you utilize the component. However using standard button element does not seem to route as you would expect. See [using the link component](https://github.com/Paratron/hookrouter/blob/master/src-docs/pages/en/03_navigation.md#using-the-link-component) – adlopez15 Mar 08 '20 at 00:43
Yes, however I am trying to link a whole table row, without putting an anchor tag on every single cell. And wrapping a in the anchor tag throws some errors. That’s why I am looking to route from the tr itself. – Quddus George Mar 08 '20 at 00:54
Yes, in the CodePen, notice it sets the url to /undefined – Quddus George Mar 08 '20 at 00:55
Without going too in depth into this package I can't understand what the expectations and limitations are. In lieu of being able to provide a satisfactory answer with this package, may I point you to this post instead? https://stackoverflow.com/a/38214919/5225577 – adlopez15 Mar 08 '20 at 01:01

How do I make a custom link component with the hookrouter?

1 Answers1