Как перейти от одной ссылки к другой внутри той же страницы, используя React URL ha sh или маршрут?

Question

У меня есть страница профиля на моем сайте, где пользователь может выбрать меню из выпадающего списка. И у меня такое же меню, установленное на той же странице, что и «боковое меню», которое пользователь может выбрать из любого. Моя проблема в том, что если пользователь выбирает из выпадающего списка, он не переходит в это конкретное меню. Может ли кто-нибудь помочь мне достичь этого? Ниже приведен код, который я пробовал, пожалуйста, поправьте меня, если я делаю что-то не так в приведенном ниже коде. Если пользователь щелкает по боковому меню, он перемещается правильно. Я написал разные компоненты для этого. Но если пользователь пытается перемещаться по меню с той же страницы, меню не перемещается.

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 имеет историческое состояние в реквизите. Для перехода на другую страницу вы можете использовать что-то вроде:

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

Вы также можете указать параметры (ie .: http://localhost: 1337 # profile ? Id = AB123 ) вроде так;

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

Надеюсь, это поможет.