How to use normal anchor links with react-router

Question

Very similar to this angular question: how do I use anchor links for in-page navigation when using react-router?

In other words, how do I implement the following pla

Answer 1

import { Link } from 'react-router-dom'

Link using

Question 1

Then insert the following code inside your target React component (Homepage):

useEffect(() => {
    const hash = props.history.location.hash
    if (hash && document.getElementById(hash.substr(1))) {
        // Check if there is a hash and if an element with that id exists
        document.getElementById(hash.substr(1)).scrollIntoView({behavior: "smooth"})
    }
}, [props.history.location.hash]) // Fires every time hash changes