Search code examples
reactjsreact-router

Jump to a specific section in a page -React

I have a footer components with some links which each one of them leads to a specific part of a page, how can I make the link jump to this specific part instead of routing only to that page.

<li><Link to="/about-us/#section1">Our History</Link></li> <li><Link to="/about-us/#section2">Our Mission</Link></li> <li><Link to="/about-us/#section3">Our Values</Link></li> <li><Link to="/about-us/#section4">Become a Distributor</Link></li>

I have tried the previous code using id of the same tag in the target section, but it didn't work. Is there any other way to do that.

Thanks,

Solution

  • Since you are using React Router, it does not have built in hash link support

    You can use this library to accomplish instead:

    https://www.npmjs.com/package/react-router-hash-link

    import { HashLink } from 'react-router-hash-link';
<HashLink smooth to='/about-us/#section1' > History </HashLink>

    your section will need to have the id to match as well

    <div id='section1'>Hi</div>