使用 react-router 滚动到同一页面上的组件

Question

我有一个单页反应应用程序（而不是所有内容都在页面上），我希望使用 react-router 滚动到同一页面上的必要组件。 这是我的导航代码，

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-router 文档中有 solution 用于您的案例。

您应该使用 HashLink 滚动到带有反应路由器的元素。

Answer 2

这可以使用react-scroll 来实现。

我把重要的代码sn-p放在这里。详细使用情况在here。

在导航组件中。

...
import { Link } from 'react-scroll';

...
<ul>
  <li className="listPadding">
    <Link onClick={this.handleScroll}
        to="about"
        activeClass="active"
        spy={true} 
        smooth={true}
    >
        ABOUT
    </Link>
  </li>
</ul>

而且 about 组件需要有唯一的 id about。 sn-p 长这样。

const About = () => {
   return (
      <div id="about">
        ...
      </div>
   );
}