New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Link with another Component like Buttons #1176

Closed
owais opened this Issue May 10, 2015 · 6 comments

Comments

4 participants
@owais
Copy link

owais commented May 10, 2015

Lets say I have a component called MyButton. Is there a quick way to attach link behaviour to it without writing an onClick handler for every button?

@ksmth

This comment has been minimized.

Copy link

ksmth commented May 10, 2015

Have you tried:

<MyButton to="user" />
class MyButton extends React.Component{
    render() { return <Link to={this.props.to} />; }
}
@owais

This comment has been minimized.

Copy link
Author

owais commented May 10, 2015

MyButton is not really my button :) It could be imported from any third party UI lib. I could do things like,

class MyButton  {
    render() { return <Link to={this.props.to}><ThirdPartyButton {...this.props}/></Link>; }
}

or simply have Link inside the ThirdPartyButton directly everywhere or vice-versa but that doesn't seem very clean to me.

@gaearon

This comment has been minimized.

Copy link
Contributor

gaearon commented May 10, 2015

I don't like this approach but if you absolutely need this, you can set up a top-level document link handler like here:

document.onclick = event => {
  const { toElement: target } = event;

  if (!target) return;

  if (target.tagName !== 'A') return;

  const href = target.getAttribute('href');

  if (!href) return;

  const resolvedHref = url.resolve(window.location.href, href);
  const { host, path } = url.parse(resolvedHref);

  if (host === window.location.host) {
    event.preventDefault();
    router.transitionTo(path);
  }
};

However, in my opinion, it's kinda strange to have some link components out of your control that nevertheless link to the internal routes in your app.

@owais

This comment has been minimized.

Copy link
Author

owais commented May 10, 2015

Agreed. onclick handlers are better :)

@ksmth

This comment has been minimized.

Copy link

ksmth commented May 11, 2015

I haven't tried this yet, but I think you could also use one of the mixins to generate the correct link in your render function and pass that along. 

On Sun, May 10, 2015 at 10:08 PM, Owais Lone notifications@github.com
wrote:

Agreed. onclick handlers are better :)

Reply to this email directly or view it on GitHub:
#1176 (comment)

@ryanflorence

This comment has been minimized.

Copy link
Contributor

ryanflorence commented Jun 18, 2015

we provide Link as a router-aware href, and mixins that have everything that link uses to work, so you can build whatever elements you want that interact with the router.

@lock lock bot locked as resolved and limited conversation to collaborators Jan 24, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.