How to navigate from one link to another inside same page using React URL hash or route?

Question

I am having a profile page on my site where the user can select the menu from dropdown. And I am having the same menu set in same page as "side menu" user can select from either one. My problem is if the user selects from the drop-down it is not navigating to that particular menu. Could anyone help me to achieve this? Below is the code I have tried please anyone correct me if I am doing something wrong in below code. If the user clicks from the side menu it is navigating properly. I have written different components for that. But if the user tries to navigate the menu from the same page the menu is not navigating.

function HeaderMenu(props: any) {
              const handleProfile = (hashTag: any) => {
                Router.push(`/MyDetails${hashTag}`);
              }

            return (
                <div>
                  <header className={styles.headerClass}>
                    <Navbar className={`${styles.navbar}`} variant="dark" expand="lg">
                      <Navbar.Toggle onClick={() => setSideMenuOpen(!sideMenuOpen)} aria-controls="basic-navbar-nav" />
                      <Col md="12" lg="3">

                                    <ul className={styles.resetList}>
                                      <li>
                                      <Button variant="link" onClick={() => handleProfile('#Schooling')}></Button> 
                                      </li>
                                      <li>
                                        <Button variant="link" onClick={() => handleProfile('#College Details')}> 
                                       </Button>
                                      </li>
                                      <li>
                                       <Button variant="link" onClick={() => handleProfile('#Project')}></Button> 
                                      </li>
                                      <li>
                                        <Button variant="link" onClick={() => handleProfile('#settings')}></Button>
                                      </li>
                                      <li>
                                        <Button variant="info" onClick={() => handleLogout()}>Sign out</Button>
                                      </li>
                                    </ul>
                                  </NavDropdown>

export default connect(mapStateToProps)(Header);

Answer 1

React's HashRouter has an history state in props. To navigate to another page, you can use something like;

redirect = (path) => {
    this.props.history.push(path);
}

You can also provide parameters (ie.: http://localhost:1337#profile?id=AB123) like so;

redirect = (path, param) => {
    this.props.history.push({
        pathname: path
        search: param
    });
}

Hope it helps.