how do i do a href in react-bootstrap from the component header to another component in the component App?

Question

What im trying to do is a link between different components in my page, i have a component header with a bunch of links and i want to make reference to anotother component on the same page, in other words im trying to do the following thing but with react:

<a href="#move">Hi!</a>
<div id="#move">You have been moved</div> 

This is what i have in the header component im using react-bootstrap, i've found some ways to do it without it but i need to do it with it

export default function Header() {

    return (
        <>
            <Navbar variant="dark" expand="lg" style={{ "background-color": "#1A2A4E" }} sticky="top" >
                <Navbar.Brand href="#home">Logo</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto" />
                    <Nav>
                        <LinkContainer to={{
                            hash:"Footer"
                        }}>
                            <Nav.Link href="#">Actividades</Nav.Link>
                        </LinkContainer>
                        <Nav.Link href="#">Fechas</Nav.Link>
                        <Nav.Link href="#">Cursos</Nav.Link>
                        <Nav.Link href="#">Instalaciones</Nav.Link>
                        <Nav.Link href="#">Contacto</Nav.Link>

                        
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </>
    )
}

and then in the App the first link gets the <a href="/#Footer" data-rb-event-key="/#Footer" class="active nav-link active">Actividades</a> but the href doesnt work the App component is:

function App() {
  return (
    <div className="App">
      <div className="imagen-fondo" />
      <div className="fondo-blaquesino" />
      <div className="">
        <Header Footer={<Footer/>} />
        <Infoinicio />
      </div>


      <div className="">
        <Actividades />
        <Cursos />
        <InscrCalendario />
        <Instalaciones />
        <Contacto />
        <div id="#Footer" />
        <Footer />
      </div>

    </div>
  );
}

Answer 1

So, you want to auto scroll to the selected id, rite? I achieve it using <NavLink /> from reactstrap . Here is how it works

NavigationBar.tsx

import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import {
  Navbar, NavbarToggler, Collapse,
  Nav, NavItem, NavLink,
} from 'reactstrap';
import { HistoryProps } from '../../interfaces';
import './TopBar.scss';

function NavigationBar(props: HistoryProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleNav = () => setIsOpen(!isOpen);

  const path = props.history.location.hash;

  return (
    <Navbar expand="md" className="navbar-wrapper">
      <NavbarToggler
        onClick={toggleNav}
        data-testid="navbar-toggler"
        className="navbar navbar-light outline-none"
      />
      <Collapse isOpen={isOpen} navbar data-testid="navbar-collapse" className="h-100">
        <Nav className="ml-auto h-100" navbar>
          <NavItem className="navbar-navitem pl-2 pr-2" active={!path || path.includes('#about-me')}>
            <NavLink className="font-size-12" href="#about-me">
              About Me
            </NavLink>
          </NavItem>
        </Nav>
      </Collapse>
    </Navbar>
  );
}

export default withRouter(NavigationBar);

And defined the target component/element, in my case, in another component.

LandingPage.tsx

import React from 'react';
import { Row } from 'reactstrap';
import './LandingPage.scss';

export default function LandingPage() {
  return (
    <div className="container-fluid">
      <Row className="about-me-wrapper id-wrapper" id="about-me">
        {/* Element here */}
      </Row>
    </div>
  );
}