[英]Scrolling to a component on the same page using react-router
I've a single page react app(rather all the content is on the page), I wish to use react-router to scroll to the necessary component on the same page.我有一个单页反应应用程序(而是所有内容都在页面上),我希望使用 react-router 滚动到同一页面上的必要组件。 This is my navigation code,这是我的导航代码,
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>
);
}
}
This is my CSS:这是我的 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;
}
I'm new to React.我是 React 的新手。 My questions are:我的问题是:
a
tag?导航元素也不会显示光标,就像常规a
标签的情况一样?This can be attained using this react-scroll .这可以使用这个react-scroll来实现。
I am putting the important code snippet here.我把重要的代码片段放在这里。 Details usage is at here .详细用法在这里。
In navigation component.在导航组件中。
...
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>
And the about component needs to have the unique id about
.而 about 组件需要有唯一的 id about
。 The snippet looks like this.片段看起来像这样。
const About = () => {
return (
<div id="about">
...
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.