React-Router 5.1.0+答案（使用钩子和React> 16.8）
您可以useHistory在功能组件上使用新的钩子，并以编程方式导航：
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+答案
在4.0及更高版本中，将历史记录用作组件的支持。
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
注意：如果您的组件不是由呈现的，则this.props.history不存在<Route>。您应该使用<Route path="..." component={YourComponent}/>YourComponent中的this.props.history
React-Router 3.0.0+答案
在3.0及更高版本中，将路由器用作组件的支持。
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+答案
在2.4及更高版本中，使用高阶组件将路由器作为组件的道具。
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
React-Router 2.0.0+答案
该版本与1.x向后兼容，因此不需要升级指南。仅通过示例就足够了。
也就是说，如果您希望切换到新模式，则路由器内有一个browserHistory模块，您可以通过该模块访问
import { browserHistory } from 'react-router'
现在您可以访问浏览器历史记录，因此您可以执行推，替换等操作，例如：
browserHistory.push('/some/path')
进一步阅读：
历史和
导航
React-Router 1.xx答案
我不会介绍升级细节。您可以在《升级指南》中阅读有关内容
关于此问题的主要更改是从导航混合到历史的更改。现在，它使用浏览器的historyAPI更改路由，因此我们pushState()将从现在开始使用。
这是使用Mixin的示例：
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
请注意，这History来自球拍/历史记录项目。不是来自React-Router本身。
如果由于某种原因（也许由于ES6类）不想使用Mixin，则可以从访问从路由器获得的历史记录this.props.history。仅路由器提供的组件可以访问它。因此，如果要在任何子组件中使用它，则需要通过将其作为属性向下传递props。
您可以在其1.0.x文档中了解有关新版本的更多信息。
这是一个专门关于在组件外部导航的帮助页面
它建议获取参考history = createHistory()并进行引用replaceState。
React-Router 0.13.x答案
我遇到了同样的问题，只能使用react-router附带的Navigation mixin找到解决方案。
这是我做的
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
我可以拨打电话transitionTo()而无需访问.context
或者您可以尝试精美的ES6 class
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
React-Router-Redux
注：如果您使用的终极版，有一个名为另一个项目
ReactRouter，终极版，为您提供终极版绑定ReactRouter，有些使用了同样的方法
做出反应，终极版呢
React-Router-Redux有几种可用的方法，这些方法允许从动作创建者内部进行简单导航。这些对于在React Native中具有现有架构的人特别有用，并且他们希望以最小的模板开销在React Web中使用相同的模式。
探索以下方法：
push(location)replace(location)go(number)goBack()goForward()
这是Redux-Thunk的用法示例：
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>