Skip to content
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
Closed

Using Link with another Component like Buttons #1176

owais opened this issue May 10, 2015 · 6 comments

Comments

@owais
Copy link

@owais 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
Copy link

@ksmth ksmth commented May 10, 2015

Have you tried:

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

@owais
Copy link
Author

@owais 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
Copy link
Contributor

@gaearon 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
Copy link
Author

@owais owais commented May 10, 2015

Agreed. onclick handlers are better :)

@ksmth
Copy link

@ksmth 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
Copy link
Contributor

@ryanflorence 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.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants