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

Feature request: 'to' property as a function in Link component #5331

Closed
smashercosmo opened this issue Jul 12, 2017 · 18 comments · Fixed by #5368
Closed

Feature request: 'to' property as a function in Link component #5331

smashercosmo opened this issue Jul 12, 2017 · 18 comments · Fixed by #5368

Comments

@smashercosmo
Copy link
Contributor

smashercosmo commented Jul 12, 2017

In RR v3 you could pass a function to 'to' property in Link component. Would you be interested in porting this functionality to RR v4? If yes I would be happy to submit a PR.

@timdorr
Copy link
Member

timdorr commented Jul 12, 2017

What's the use case for this? It sounds like you can achieve the same thing with component composition.

@smashercosmo
Copy link
Contributor Author

Yep, it's just for convenience and for reducing the amount of API inconsistencies between v3 and v4

@timdorr
Copy link
Member

timdorr commented Jul 12, 2017

Well, go ahead and work up a PR. We can discuss the implementation specifics over there.

@mjackson
Copy link
Member

FWIW I don't see a lot of value in this feature. Seems like you could just as easily call the function yourself instead of asking us to call it.

<Link to={someFunc}/>
<Link to={someFunc(stuff)}/>

In the first implementation we have to decide what arguments we're going to pass to the function you provide. In the second, you just go ahead and call it.

@smashercosmo
Copy link
Contributor Author

mmm... but the point is that this function is called with "location" as argument. In RR3 it was very convenient, that you didn't have wrap parent component in withRouter to get the location object.

<Link to={location => {...location, query: {search: 'hello'}}}>

Of course in RR4 you can achieve that by wrapping Link into Route component, but I just thought it would be nice to keep the API consistent between RR3 and RR4.

@mjackson
Copy link
Member

Ah, I see. That's a great use case, thanks for sharing :). I'd definitely be open to a PR that does this.

@smashercosmo
Copy link
Contributor Author

I started working on the PR. @timdorr could you give me some guidance? Currently I have a problem with tests. When I run them I get a lot of errors like "Cannot find module 'react-router' from 'BrowserRouter.js'". What could be the problem?

@timdorr
Copy link
Member

timdorr commented Jul 16, 2017

You most likely need to run the build script first.

@smashercosmo
Copy link
Contributor Author

smashercosmo commented Jul 16, 2017

@timdorr thx, it worked. One more question. I noticed, that you're not currently testing clicks on a Link. Should I write these tests using react test utils? And if yes, should I write them only for to-as-a-function case or for all the cases?

@smashercosmo
Copy link
Contributor Author

@timdorr ping

@pshrmn
Copy link
Contributor

pshrmn commented Jul 17, 2017

@smashercosmo There used to be some tests, but I think that they got lost in the switch to the monorepo. I have a click test in the relative link PR that you can reference: https://github.com/pshrmn/react-router/blob/cd42cf65a2a7394bd6b234238f370df8d274ca80/packages/react-router-dom/modules/__tests__/Link-test.js#L127-L154

I would probably start with just the test for to-as-a-function. The other tests should probably be brought back, but maybe in another PR?

@smashercosmo
Copy link
Contributor Author

@pshrmn ok, thx, got it

@smashercosmo
Copy link
Contributor Author

@timdorr @pshrmn One more question, I'm not quite sure what to do with NavLink, because in NavLink "to" property value gets passed to ''path" property of Route component.

@pshrmn
Copy link
Contributor

pshrmn commented Jul 23, 2017

@smashercosmo The way that I would approach <NavLink> is to call the to function right away to generate the location object to navigate to. You will also need to add context to the <NavLink> in order to access the current location.

const NavLink = ({ to, ... }, context) => {
  const goTo = typeof to === 'function'
    ? to(props.location || context.router.route.location)
    : to
  return (
    <Route
      ...
      children={(...) => {
        <Link to={goTo} ... />
      }
    />
  )
}

NavLink.contextTypes = {
  router: PropTypes.shape({
    route: PropTypes.shape({
      location: PropTypes.object.isRequired
    }).isRequired
  }).isRequired
}

@pshrmn
Copy link
Contributor

pshrmn commented Jul 23, 2017

Also, feel free to open a PR. You can always rebase later, so it doesn't really hurt to open the PR early.

@smashercosmo
Copy link
Contributor Author

@pshrmn Alright, thank you very much

@smashercosmo
Copy link
Contributor Author

Done #5368

@mjackson mjackson added this to the 4.4 milestone Nov 1, 2018
@mjackson mjackson modified the milestones: 4.4, 4.5 Mar 15, 2019
@mjackson mjackson removed this from the 5.1 milestone Mar 26, 2019
@jimrandomh
Copy link

It looks like this issue fell through the cracks and didn't get merged. This is causing porting problems for us (LessWrong); we're upgrading react-router-dom because our framework (Vulcan) dragged us along, and there are some existing usages of the function-style links in our code. It's too late for these PRs to help us, but, could one of them get merged reasonably soonish?

@lock lock bot locked as resolved and limited conversation to collaborators Aug 11, 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

Successfully merging a pull request may close this issue.

5 participants