使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
当前回答
对于当前的React版本(15.3),this.props.history.push('/location');对我有用,但它显示了以下警告:
browser.js:49警告:[creact router]props.history和context.hhistory已弃用。请使用context.router。
我用context.router解决了这个问题:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.backPressed = this.backPressed.bind(this);
}
backPressed() {
this.context.router.push('/back-location');
}
...
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default MyComponent;
其他回答
React Router 4.x答案
在我这一方面,我希望有一个单独的历史对象,我甚至可以携带外部组件。我喜欢按需导入一个history.js文件,并对其进行操作。
您只需将BrowserRouter更改为Router,并指定历史属性。这对你来说没有任何改变,除了你有自己的历史对象,你可以随心所欲地操纵它。
您需要安装历史记录,即react router使用的库。
示例用法,ES6表示法:
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()
基本组件.js
import React, { Component } from 'react';
import history from './history';
class BasicComponent extends Component {
goToIndex(e){
e.preventDefault();
history.push('/');
}
render(){
return <a href="#" onClick={this.goToIndex}>Previous</a>;
}
}
如果您必须从实际从Route组件渲染的组件进行导航,还可以从props访问历史,如下所示:
基本组件.js
import React, { Component } from 'react';
class BasicComponent extends Component {
navigate(e){
e.preventDefault();
this.props.history.push('/url');
}
render(){
return <a href="#" onClick={this.navigate}>Previous</a>;
}
}
在React Router v4中实现这一点时面临问题的人。
这里有一个从redux操作导航到React应用程序的工作解决方案。
文件history.js
import createHistory from 'history/createBrowserHistory'
export default createHistory()
文件App.js/Route.jsx
import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
<Route path="/test" component={Test}/>
</Router>
文件*另一个_File.js或redux文件
import history from './history'
history.push('/test') // This should change the URL and rerender Test component
感谢GitHub上的评论:ReactTraining问题评论
对于当前的React版本(15.3),this.props.history.push('/location');对我有用,但它显示了以下警告:
browser.js:49警告:[creact router]props.history和context.hhistory已弃用。请使用context.router。
我用context.router解决了这个问题:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.backPressed = this.backPressed.bind(this);
}
backPressed() {
this.context.router.push('/back-location');
}
...
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default MyComponent;
在写作时,正确的答案适合我
this.context.router.history.push('/');
但您需要将PropTypes添加到组件中
Header.contextTypes = {
router: PropTypes.object.isRequired
}
export default Header;
不要忘记导入PropTypes
import PropTypes from 'prop-types';
如果您使用的是更新版本的React,那么使用“useHistory”钩子是最好的选择。