Using anchor tags in react-router 4

It is a known issue with react router. (https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604)

There is a solution as well. https://www.npmjs.com/package/react-router-hash-link this package solves the issue.

You have to use this Hash Link as the Link like below.

import { HashLink as Link } from 'react-router-hash-link';

To scroll down to your anchor tags, you need to install React Router Hash Link, with:

npm install --save react-router-hash-link

then import Hash Link:

import { HashLink as Link } from 'react-router-hash-link';

and then use Hash Link, for example:

<Link to="/pathLink#yourAnchorTag">Your link text</Link>

and at the destination component, for example:

<div id= "yourAnchorTag">
      <p>Linked to here<p>
</div>

Related