I am developing a simple single-page website with React.

On top of the page I have a menu bar, with links to certain parts of the page:

    <li><a href="/#about">About us</a></li>
    <li><a href="/#services">Services</a></li>
    <li><a href="/#team">Team</a></li>    

The parts of my page (not necessarily components) have the corresponding ID attribute, eg:

...
        <div id="about" className="rn-about-area ptb--120 bg_color--5">          
             ... <CONTENT>
        </div>

When a link in the menu bar gets clicked, the page should jump to the corresponding part of the page. The problem: The links are working in Chrome and Firefox, but not in Safari.

What I tried so far based on similar StackOverflow questions (that are over ten years old):

• Omitting the / before the #anchor: <li><a href="#about">About us</a></li>
• Defining the absolute URL path to each anchor: <li><a href="https://myURL.com/#about">About us</a></li>
• Implementing methods like scrollTo() or scrollIntoView()
• Wrapping the anchor-elements in React components
• Checking for redirects that may cause problems using https://www.redirect-checker.org/index.php

but nothing works.

Is there any other way I could try? If not, my only idea is to destructure the page into seperate pages, so I can link them without using anchors.

EDIT: There might be an issue with React and the way the website is set up, because I checked a similar page, created without React, and there the first mentioned approach works, also in Safari.