Question

我只有一个页面react应用程序（而是所有内容都在页面上），我希望使用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;
}

我是新来的反应者，因此非常感谢您的帮助。我的问题是： 1.常规元素a的情况下，导航元素的光标也不显示吗？ 2.这会弹出页面上的组件，如何防止这种行为并向下滚动到同一页面上的相关组件？

Answer 1

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

我将重要的代码片段放在这里。详细信息用法位于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。该代码段如下所示。

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

Answer 2

您的案例中有solution属于官方反应路由器文档。

您应该使用HashLink滚动到带有React Router的元素。

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

2 个答案: