Skip to content

add shared <Link> component that uses react-router <Link> or <a>

Warren Gifford requested to merge use-correct-link into master

Created by: sqs

  • If a component in shared/ uses react-router-dom's <Link> or <NavLink>, it will throw an error in the browser extension because the browser extension does not have an ancestor react-router-dom <BrowserRouter>.
  • If a component in shared/ uses <a> (and the href is a relative URL), it will likely have bad behavior: it will cause a full page reload instead of using HTML history API navigation (pushState).

This adds a new <Link> component in shared/ that works correctly in both cases. This component should be used in all shared/ code that needs a link.

It also adds a tslint rule to prevent imports of react-router or react-router-dom in shared/ (which are unnecessary and will lead to these kinds of bugs).

See the docstring for the new <Link> component in shared/src/components/Link.tsx for more info.

Merge request reports