useHistory with useNavigate | Scrimba | Page 1

candid glacier Feb 16, 2023, 4:09 PM

#

in the 6v version u cannot use useHistory anymore and i try to use useNavigate but cant do the same thing.
i have container with 4 components that are on the top of each other and i want that when i click on a button it wont just show me 1 component but will go down to the third component.
i tried to find a solution and couldn't please help :*)

placid merlin Feb 16, 2023, 4:12 PM

#

Are you trying to scroll to the third component?

candid glacier Feb 16, 2023, 4:12 PM

#

yes

placid merlin Feb 16, 2023, 4:13 PM

#

If so, you could add an id to your component, and use an anchor tag which refers to that id. Clicking on the anchor would made you jump to that component

#

<MyComp id="target-me" /> then the anchor which targets it would be the following: <a href='#target-me'>Jump to MyComp</>

#

They have a bigger example on the following site: https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html

#

or take a look at the MDN doc:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page

candid glacier Feb 16, 2023, 4:20 PM

#

i will check it thank you 🙂

placid merlin Feb 16, 2023, 4:38 PM

#

good luck 🙂

candid glacier Feb 18, 2023, 10:07 AM

#

it works but when im on another container it wont go to this container and anchor it

placid merlin Feb 18, 2023, 12:15 PM

#

Would you be able to share a code example with us?

#

Do you have some custom components which you assign an id to?
If so, make sure you pass down the id property and use it inside that component.

#useHistory with useNavigate