Make it work with react router v6

[XzaR90]

Hi, would be nice with a version for v6.

I made a fork but backwards compatibility is lost and at the moment custom link is gone.

[XzaR90]

Added support for custom link as well but with breaking changes, GenericHashLink. https://github.com/XzaR90/react-router-hash-link

[awreese]

Does it need to be bumped all the way to React v17? RRDv6 still supports any version of React compatible with hooks, i.e. >=16.8. https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/package.json#L21

  "peerDependencies": {
    "react": ">=16.8",
    "react-dom": ">=16.8"
  },

[XzaR90]

Oh, did not check. Well my fork is using typescript and I don,t know if you still want keep plain js. If you have any plan to migrate you can base it on my code if you find it okey and change the dependency as well.

[douglasrcjames]

Bumping this as an issue. Doing a bit of research on using anchor hash links with react-router-dom v6 and looks like they have no plan to implement this functionality into the library by default so react-router-hash-link will be relevant and needs to be updated for v6!

[rafgraph]

It's on my list, but it might be a little while before I get to it.

[ArthurBZhou]

The definition of NavLink.isActive has been changed in V6, please refer to https://github.com/remix-run/react-router/issues/7991#issuecomment-916360778

[XzaR90]

In my fork it can be used like this,

<NavHashLink
  to="/some/path#with-hash-fragment"
  className={(props) => {
    return `${props.isActive ? 'isActive ' : ''}`;
  }}
  style={(props) => {
    return props.isActive ? { fontWeight: 'bold' } : {};
  }}
  // etc...
>Link to Hash Fragment</NavHashLink>

[AyoCodess]

The scroll on this and the forked version does not work across all browsers on mobiles. Works fine on desktops. Any ideas?

[Peege151]

Hey all. Working with React-Router V6, I define my routes like

<Route path='/account' element={<Account />} />, which I believe is causing a reload every time a hash link is clicked. #83 mentions that component={Account} would be the way to go, but I do not believe that is possible.

Currently the <HashLink> only works reliably if I set a timeout because the page is reloading even though it doesn't need to, it should be scrolling to the same page without a refresh.

[eduhsoto]

I use react router v6, so works well i use react router has link

[ncoughlin]

I've built a component that solves this problem passively in the background without having to modify any react-router Links.

GitHub: ScrollToHashElement

[santiaago]

thanks for sharing @ncoughlin ! worked like a charm.