Estoy desarrollando un sitio web simple de una sola página con React.

En la parte superior de la página tengo una barra de menú, con enlaces a ciertas partes de la página:

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

Las partes de mi página (no necesariamente componentes) tienen el atributo ID correspondiente, por ejemplo:

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

Cuando se hace clic en un enlace en la barra de menú, la página debe saltar a la parte correspondiente de la página. El problema: los enlaces funcionan en Chrome y Firefox, pero no en Safari.

Lo que probé hasta ahora basado en preguntas similares de StackOverflow (que tienen más de diez años):

• Omitir el / antes del #ancla: <li><a href="#about">About us</a></li>
• Definición de la ruta URL absoluta para cada ancla: <li><a href="https://myURL.com/#about">About us</a></li>
• Implementando métodos como scrollTo() o scrollIntoView()
• Envolviendo los elementos de anclaje en los componentes de React
• Comprobación de redireccionamientos que pueden causar problemas utilizando https://www.redirect-checker.org/index.php

pero nada funciona

¿Hay alguna otra forma en que pueda intentarlo? Si no, mi única idea es desestructurar la página en páginas separadas, para poder vincularlas sin usar anclas.

EDITAR: Puede haber un problema con React y la forma en que está configurado el sitio web, porque revisé una página similar, creada sin React, y allí funciona el primer enfoque mencionado, también en Safari.