React ancor doesen't scroll down on reload - reactjs

Question

Im using React v6 and trying to implement ancors. I want that i can get the link of a subtitle so that when i send it to a friend the page is opend and scrolled down to the subtitle. I found out that Ancors are used for that but couldnt find a solution that works. When I navigate on the page via the link it works and it scrolls to the subtitle but if i close the tab and open it again this time with the link and the ancor it doesent scroll down.
does someone know an easy solution for this problem?

Answer 1

Please use
import { useEffect } from 'react';
function ContentContainer({ header, content, descriptionExample, additiv, linkToSite, linkText }) {
useEffect(() => {
if (typeof window !== 'undefined') {
// Check if the current URL has a hash
if (window.location.hash) {
// Get the element with the corresponding id
const element = document.getElementById(window.location.hash.substring(1));
if (element) {
// Scroll to the element
element.scrollIntoView({ behavior: 'smooth' });
}
}
}
}, []);
return (
<div id={header} className={style['content-container']}>
<div onClick={() => iconClicked(header)} className={style['content-container-header']}>
<Link smooth to={header}>{header}</Link>
<div className={style['header-anker-icon']}>
<InsertLinkOutlinedIcon className={style['link-icon']} />
</div>
</div>
<div className={style['content-container-content']}>{content}</div>
<img className={style['content-container-img-example']} src={example} />
<div className={style['content-container-description']}>{descriptionExample}</div>
<div className={style['content-container-additiv']}>{additiv}</div>
<a className={style['content-container-link']} href={linkToSite}>
{linkText}
<InsertLinkOutlinedIcon className={style['link-icon']} />
</a>
</div>
);
}
export default ContentContainer;