我迫不及待地开始使用react-routerv4的最新 alpha 版本。全新的功能<BrowserRouter/>可以让您的 UI 与浏览器历史记录保持同步，但我如何使用它以编程方式导航？
在 React-Router v4 中以编程方式导航
IT技术
reactjs
react-router
2021-04-19 11:43:18
6个回答
路由器将history在props散列中向您的组件添加一个对象。因此，在您的组件中，只需执行以下操作：
this.props.history.push('/mypath')
这是一个完整的例子：
在App.js：
import React from 'react'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import Login from './Login'
export default class App extends React.Component {
render() {
return (
<Router>
<div>
<Route exact path='/login' component={Login} />
</div>
</Router>
)
}
}
在Login.js：
import React, {PropTypes} from 'react'
export default class Login extends React.Component {
constructor(props) {
super(props)
this.handleLogin = this.handleLogin.bind(this)
}
handleLogin(event) {
event.preventDefault()
// do some login logic here, and if successful:
this.props.history.push(`/mypath`)
}
render() {
return (
<div>
<form onSubmit={this.handleLogin}>
<input type='submit' value='Login' />
</form>
</div>
)
}
}
在过去，您可能习惯于browserHistory推动一条新的道路。这不适用于react-routerv4。相反，你必须使用化妆作出react的中context和router的transitionTo方法。
这是一个简单的例子：
import React from 'react';
class NavigateNext extends React.Component {
constructor() {
super();
this.navigateProgramatically = this.navigateProgramatically.bind(this);
}
navigateProgramatically(e) {
e.preventDefault();
this.context.router.transitionTo(e.target.href)
}
render() {
return (
<Link to={"/next-page"}
onClick={this.navigateProgramatically}
>Continue</Link>
);
}
}
NavigateNext.contextTypes = {
router: React.PropTypes.object
};
transitionTo只是可用的router方法之一。router对象还包含blockTransitions(getPromptMessage)，createHref(to)并且replaceWith(loc)这是值得一试。
这是提到上述方法的官方react-router教程。如果您想了解有关使用react的更多信息，context请查看文档。
我没有足够的声誉来发表评论，但在回答@singularity 的问题时，您必须包含您希望在组件类的contextTypes静态属性上可用的上下文属性。
如果未定义 contextTypes，则 context 将是一个空对象。
在这种情况下：
class NavigateNext extends React.Component {
// ...
static contextTypes = {
router: PropTypes.object
}
// ...
}
与propTypes,contextTypes实际上导致 React 的行为不同，并且不仅用于类型检查。
使用withRouter将为您的组件添加路由器属性，然后您可以像使用 v3 一样访问history和使用push：
import React from 'react';
import { withRouter } from 'react-router-dom';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
};
this._submit = this._submit.bind(this);
}
render() {
return (
<form onSubmit={this._submit}>
<input type="text" onChange={(event) => this.setState({input: event.target.value})}/>
<button type="submit">Submit</button>
</form>
);
}
_submit(event) {
event.preventDefault();
this.props.history.push(`/theUrlYouWantToGoTo`);
}
}
export default withRouter(Form);
react-router v4 beta 发布，API 稍有改动。而不是this.context.router.transitionTo(e.target.href)做什么，this.context.router.push(e.target.href)如果你使用的是最新版本。
链接到新文档：https : //reacttraining.com/react-router/#context.router