(EDITADO)
Tengo una aplicación de reacción donde quiero tener la barra de navegación en cada página. Así que hice un componente de barra de navegación y lo agregué a cada página nueva. En la página principal, la barra de navegación funciona bien desplazándose a la sección seleccionada. Sin embargo, en cualquier otra página, la barra de navegación no puede desplazarse a esa sección porque no se encuentra. Entonces mi pregunta es, ¿cómo puedo hacer clic en la barra de navegación para redirigir a la página principal y LUEGO desplazarme a un elemento?

Aquí está el código simplificado.

Código de barra de navegación

 export default function navbar(){ return( <div className="nav-container"> <nav> <ul className="desktop-nav"> <li> <a className="link-logo" onClick = {() => {scrollTo('landing-page')}} /> </li> <li> <a onClick = {() => {scrollTo('elem1')}}>elem1</a> </li> <li> <a onClick = {() => {scrollTo('elem2')}}>elem2</a> </li> <li> <a onClick = {() => {scrollTo('elem3')}}>elem3</a> </li> </ul> </nav> </div> ); } function scrollTo(elem){ document.getElementById(elem).scrollIntoView(true); }

Código de la página principal

 export default function Home(){ return( <div> <div id = 'elem1'>elem1</div> <div id = 'elem2'>elem2</div> <div id = 'elem3'>elem3</div> <a href = '/somewhere'> Go to Second Page </a> </div> ); }

enrutador de aplicaciones

 function App() { return ( <Router> <Switch> <Route exact path = '/' component = {SITE} /> <Route exact path = '/somewhere' component = {SECOND_PAGE}/> </Switch> </Router> ); } export default App;

Ahora, desde el componente SECOND_PAGE que se muestra como una página separada, ¿cómo puedo hacer que los enlaces de la barra de navegación vayan al componente SITE y se desplacen al enlace especificado sin agregar nada a la URL? No quiero que los usuarios puedan ver mis ID de div y nombres de clase si es posible. Quiero que la URL sea estática mientras navego por esos dos componentes.