如何解决React 站点导航无需重新加载
需要无需重新加载页面即可导航。
例如从代码中的某个地方点击按钮或链接
export default class Test1 extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
this.props.history.push('/my-path')
}
render() {
return (
<a className={this.props.className} onClick={this.onClick}>{this.props.children}</a>
<input type="button" onClick={this.onCLick} value="halo2"/>
);
}
}
但是 this.props.history 是未定义的。
类似的东西
export default withRouter(Test1);
产生错误
Error: Invariant failed: You should not use <withRouter(Test1) /> outside a <Router>
最积极的效果是创建像这里这样的额外历史类How to get history on react-router v4?
但它只会更改 URL,而不会实际移动到该位置(不呈现也不执行预期的事件)。
更新 1
甚至尝试将历史推送到全局变量
class DebugRouter extends BrowserRouter {
constructor(props) {
super(props);
App.history = this.history;
然后
App.history.push('/my path');
它也只更改 URL。页面和事件没有变化
解决方法
我通常使用 Link
中的 'react-router-dom'
。
因此您可以将 <a>
更改为 <Link to='/path'>Text</Link>
还要确保您的整个应用程序都在提供程序 <BrowserRouter>
内,否则它都不会工作。
这是如何使用它的有用链接:https://reactrouter.com/web/guides/quick-start
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。