`<Link/>` cannot be rendered outside `<Router/>` but doesn't tell me about that

[kettanaito]

I'm using React Router as a...

library

Reproduction

import { Link } from 'react-router'

<div>
  <Link to="/cart">Go to Cart</Link>
</div>

Sorry for not providing more but it's not necessary, really. The <Link /> component doesn't seem to have the same check as React Router hooks, resulting in a degrading DX.

System Info

I believe this is irrelevant.

Used Package Manager

npm

Expected Behavior

I expect this unintentionally incorrect usage to throw the same error as I get when using React Router hooks without the <Router /> context:

Error: <Link> may be used only in the context of a <Router> component.

This will be a more meaningful error message and will help me figure out what I'm doing wrong, as opposed to the internal "cannot read from context because context doesn't exist", which doesn't tell me much.

Actual Behavior

The following, user-unfriendly error is being thrown:

Cannot destructure property 'basename' of 'React10.useContext(...)' as it is null.

I know this error has been raised before in #11237 and #10867, none of which were actually solved for developers also due to this error being semi-cryptic.

[kettanaito]

If you find my error suggestion appropriate, I can open a pull request with a test and fix for this one. Thanks.

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!