我有一个简单的React路由器配置。我有另一个基本上用... Package 的配置,它工作。但这个不工作(当然我尝试使用不同的实现,如this post和许多其他的答案中建议的)。
控制台错误是这篇文章的标题。使用ES6,和react-router v.1与基于哈希的路由。
我读了很多的文章,对于简单路由的实现来说太不必要了,现在几乎讨厌react和react-router了。请帮助我。
componentWillReceiveProps() {
this.contextTypes = {
history: React.PropTypes.object
}
},
_handleRoute(e) {
e.preventDefault()
this.history.pushState(null, `/somepath`);
},
render() {
return(
<div onClick={this._handleRoute}>
Some Content.
</div>
);
}
或:
render() {
return(
<div>
<Link to={`/somepath`}> link </Link>
</div>
);
}
5条答案
按热度按时间wkftcu5l1#
React路由器v1:
历史对象中的pushState方法就是为此创建的。
首先,为路由器分配的组件必须将pushState方法作为函数prop提供给子组件:
然后,在我想要在函数中更改路由的组件中,我只需执行以下操作:
React路由器第2版
cfh9epnr2#
您得到的错误表明
context.history
没有定义。这很可能是因为您没有在顶层呈现
<Router>
或等效组件。尝试从React Router提供的一些示例开始,并修改它们以适合您的特定用例。o7jaxewo3#
我已经很久没有问过这个问题了,但我想我应该回答一个最简单最基本的答案,我发现它是有效的,那就是:
如果有人有一个更好的,更“React的方式”做这件事;请回答。我还是不认为这个答案正确。
lh80um4z4#
使用新的React路由更新回答并更新React截止日期:* * 二零一七年七月二十九日**
所有版本:
我的路线看起来像它...
关于New React Rout Quick Start的更多详情
对于链接视图或导航视图
如果采取
console.log(this.props.history);
然后你的浏览器控制台你得到它...所以不能像
this.props.history.replace(null, '/');
那样使用它因为这里的路径为空,所以这是不可能的。
olmpazwi5#
在
react-router-dom v6
中,您必须使用useNavigate()像这样:
这样你可以导航到另一个url