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>