React-router: Warn on using Link outside of a Router

[Connorelsea]

I am unsure if I am doing anything wrong here and how to fix it.

Edit: Solved, check first comment.

Version

4.0.0-2

Steps to reproduce

Using create-react-app (with Babel and Webpack), create a Link by doing <Link to="/example" >Example</Link>

Expected Behavior

Should create a Link

Actual Behavior

Produces the following error:

Link.js:116 Uncaught TypeError: Cannot read property 'pathname' of undefined

The transpiled List file (See stack trace for error lines): https://gist.github.com/Connorelsea/66c14f7dfaa81b2150898663550fc2a0

When the transpiled code attempts to find the location, they are both undefined.

location || this.context.location becomes undefined || undefined

You can see the values of the variables of the transpiled code through Chrome dev tools in the following screenshot next to each variable.

[Connorelsea]

Solved: The Link has to be rendered inside of a Router. Can this be explained better here and/or in the docs? I am starting to see the inner-workings by reading the code, but it would really be great to have a more clear stance in the docs about the inner-workings of this specifically.

[Connorelsea]

Would it be easy to throw a more human readable error when a Link or Match or something is used outside of a router? I think I had the same problem earlier trying to use a Match outside of a Router parent. It is not immediately clear to a beginner why this is the case and a cryptic error led me down a more complicated debug path

[timdorr]

We allow Link outside of Router on 2.x/3.0. We should probably do the same here and just create an a tag with warnings.

[timdorr]

Note, that we did this on 2.x in #3572

[Connorelsea]

@timdorr Seems like the fix in 2.x was only adding an invariant. Yet the Link in 4.x breaks when used outside of the Router (because of the location). Should we fix the breaking and add the invariant, or let it continue to break, just adding an invariant?

[timdorr]

We also have a guard to let folks render the a tag without a router instance.

[Connorelsea]

@timdorr Ah, cool. Can I try to implement this in a PR?

[timdorr]

Go nuts! It would be appreciated.

[Connorelsea]

I'll try, but no promises. This would be my first open source PR. Thanks!

[Connorelsea]

@timdorr Here, does it simply not return anything if it is not inside of a Router? Just so people can test props and stuff in unit tests? https://github.com/ReactTraining/react-router/blob/master/modules/Link.js#L114

[timdorr]

Return statement is below that block. It just doesn't build up an extra props is all.

[Connorelsea]

Ah. Sorry, was reading wrong.

[Connorelsea]

@timdorr I think I've got a good start on it here. Please let me know what to change or what is OK when you've got a chance. Thanks!

[pshrmn]

With #3986 this is closer to working, but it fails in the handleTransition call which still requires a router.

There are two possible solutions:
1) Add a check for the existence of this.context.router in handleClick. If this fails, then event.preventDefault() won't be called and the link will navigate naturally.
2) Add a check for the existence of this.context.router in handleTransition. If this fails, use window.location to set the location to the this.props.to value.

Option 1 seems better to me.

Without access to the router, the <Link>'s to prop will need to be a string, which should probably be documented.

Active checks still work provided the user passes a location prop to the <Link>.

[ryanflorence]

98fe7145a57f6a9bdef5fb65bb98ddb1dd3aaee5