我为我的网站导航栏创建了一个自定义按钮组件。当用户点击按钮时,该组件返回一个重定向,将用户带到所选页面。
export default class Button extends Component {
constructor(props){
super(props);
this.state = {redirect:false};
this._handleClick = this._handleClick.bind(this);
}
_handleClick(e) {
e.stopPropagation();
this.setState({redirect: true});
}
componentDidUpdate() {
if (this.state.redirect){
this.setState({redirect:false});
this.props.onRedirect();
}
}
render() {
if (this.state.redirect){
return <Redirect push to={this.props.dest}/>;
}
else {
return (
<li className="button" onClick={this._handleClick}>
<h5>{this.props.text}</h5>
</li>
);
}
}
}
现在,我想添加与同一页不同部分相对应的按钮。我所知道的最简单的方法是使用哈希链接。一个例子是按钮将重定向到以下地址:
/home#description
然而,React Router 并没有原生支持此功能。我查看了许多添加此功能的包,例如 react-router-hash-link 和 react-scrollchor。但是,这些都无法与重定向一起使用,而是依赖于
Link
或自定义组件。我该如何在按钮中添加此功能?
/signup#foo
should redirect to/signup#bar
- Alex Dunlop