Прокрутка до компонента на той же странице с использованием реакции-маршрутизатора

Question

У меня есть одностраничное приложение реагирования (скорее всего, все содержимое на странице), я хочу использовать реагирующий маршрутизатор для прокрутки до необходимого компонента на той же странице.Это мой код навигации,

class Navbar extends React.Component {
constructor(props){
    super(props)

}
renderMain() {
    return (
        <div></div>
        //return home
    );
}
handleScroll = e => {
    e.preventDefault();
    const main = this.main.current;
    window.scrollTo({
        top: main.offsetTop,
        left: 0,
        behavior: "instant"
    });
};
render(){
    return (
        <div className="navbar container">
            <div className="logo">
                <img src={logo}></img>
            </div>
            <BrowserRouter>
                <div className="navigation">
                    <ul>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/"
                                                          className="navLink"
                                                          activeClassName="activeRoute" />HOME</li>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/whats-crcl" className="navLink"
                                                          activeClassName="activeRoute"/>WHAT'S CRCL?</li>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/founders" className="navLink"
                                                          activeClassName="activeRoute"/>THE FOUNDERS</li>
                        <li className="listPadding"><Link onClick={this.handleScroll}
                                                          to="/careers" className="navLink"
                                                          activeClassName="activeRoute"/>WE'RE HIRING!</li>
                        <li className="button"><Link to=""/>READ THE BLOG</li>
                    </ul>
                    <Switch>
                        <Route exact path="/" component={() => this.renderMain()} />
                        <Route exact path="/whats-crcl" render={() => Snippets} />
                        <Route exact path="/the-founders" render={() => MainContent} />
                        <Route exact path="/whats-crcl" render={() => Careers} />
                        <Route render={() => <h1>Page not found</h1>} />
                    </Switch>
                </div>
            </BrowserRouter>


        </div>
    );

}

}

Это мой код CSS:

    .navigation {

      ul {
        li {
          font-family: 'Roboto', sans-serif;
          font-size: 1.2em;
          font-weight: 400;
          color: #ffffff;
          list-style: none;
          display: inline-block;

          a.navLink:link {
            color: #fff;
            font-size: 1.6rem;
            line-height: 1.6rem;
            text-decoration: none;
          }
          a.navLink:visited {
            color: #fff;
          }
          a.navLink:hover {
            color: #595959;
          }

          a.navLink:active {
            color: #595959;
          }


        }
      }
    }

.activeRoute {
  background-color: yellow;
  border-bottom: 0.4rem solid teal;
  cursor: not-allowed;
}

Я новичок в React.Мои вопросы:

1. Также не отображается курсор для элементов навигации, как в случае с обычным тегом a?
2. Это выдает компонент на страницеКак я могу предотвратить такое поведение и прокрутить вниз до соответствующего компонента на той же странице?

Answer 1

Для вашего случая есть официальное решение на официальном документе React.

. Вы должны использовать HashLink для прокрутки до элемента с реагирующим маршрутизатором.