From Navbar redirect to a certain part in a different page React

Yael Tzruia 0
Viewed 49

I want to redirect my users when they click on "How it works" button in the nabber, be redirected to the middle part of the home page, not from the top. Now when I do it I get redirected to the page as normal. I tried chakra ui (skip nav) but it isn't working. Any suggestions on how it could be done? package? right now I just have a normal useNavigate().

chakra-ui design-patterns reactjs
2 Answers

Using react-router-hash-link, you can make your navbar button to be a HashLink like so:

import { HashLink } from 'react-router-hash-link';
...
<HashLink to={'/your/home/path#location'}>How it works</HashLink>

Then, on your home page, let's say that the part you want to scroll to is wrapped in a div, we can start the page on that div by giving it an id of "location" like so:

<div id="location"></div>
Mansehaj Singh0

Add id attribute to your middle section and try using useNavigate like this

const navigate = useNavigate();
navigate("/#YourMiddleSectionIdHere") //assuming you have to navigate to the middle section in your home page
Sandeep Gumaste0
Related