我刚刚把react-router从v3替换为v4。 但我不确定如何以编程方式在组件的成员函数中导航。 即在handleClick()函数中,我想在处理一些数据后导航到/path/some/where。 我以前是这样做的:
import { browserHistory } from 'react-router'
browserHistory.push('/path/some/where')
但是我在v4中找不到这样的界面。 如何使用v4导航?
我刚刚把react-router从v3替换为v4。 但我不确定如何以编程方式在组件的成员函数中导航。 即在handleClick()函数中,我想在处理一些数据后导航到/path/some/where。 我以前是这样做的:
import { browserHistory } from 'react-router'
browserHistory.push('/path/some/where')
但是我在v4中找不到这样的界面。 如何使用v4导航?
当前回答
如此:
import { withRouter } from 'react-router-dom';
const SomeComponent = withRouter(({ history }) => (
<div onClick={() => history.push('/path/some/where')}>
some clickable element
</div>);
);
export default SomeComponent;
其他回答
如此:
import { withRouter } from 'react-router-dom';
const SomeComponent = withRouter(({ history }) => (
<div onClick={() => history.push('/path/some/where')}>
some clickable element
</div>);
);
export default SomeComponent;
我为此纠结了一段时间——如此简单,却又如此复杂,因为ReactJS只是一种完全不同的web应用程序编写方式,这对我们这些老年人来说非常陌生!
我创建了一个单独的组件来抽象混乱:
// LinkButton.js
import React from "react";
import PropTypes from "prop-types";
import {Route} from 'react-router-dom';
export default class LinkButton extends React.Component {
render() {
return (
<Route render={({history}) => (
<button {...this.props}
onClick={() => {
history.push(this.props.to)
}}>
{this.props.children}
</button>
)}/>
);
}
}
LinkButton.propTypes = {
to: PropTypes.string.isRequired
};
然后将它添加到render()方法中:
<LinkButton className="btn btn-primary" to="/location">
Button Text
</LinkButton>
TL; diana:
if (navigate) {
return <Redirect to="/" push={true} />
}
简单和声明性的答案是,您需要结合setState()使用<Redirect to={URL} push={boolean} />
Push:布尔值——当为true时,重定向将把一个新条目推到历史记录中,而不是替换当前的条目。
import { Redirect } from 'react-router'
class FooBar extends React.Component {
state = {
navigate: false
}
render() {
const { navigate } = this.state
// here is the important part
if (navigate) {
return <Redirect to="/" push={true} />
}
// ^^^^^^^^^^^^^^^^^^^^^^^
return (
<div>
<button onClick={() => this.setState({ navigate: true })}>
Home
</button>
</div>
)
}
}
完整的例子。 点击这里阅读更多。
本例使用ES7+属性初始化器初始化状态。如果你感兴趣的话,也看看这里。
由于没有其他方法来处理这个可怕的设计,所以我编写了一个使用withRouter HOC方法的通用组件。下面的例子是包装一个按钮元素,但你可以更改为任何你需要的可点击元素:
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
const NavButton = (props) => (
<Button onClick={() => props.history.push(props.to)}>
{props.children}
</Button>
);
NavButton.propTypes = {
history: PropTypes.shape({
push: PropTypes.func.isRequired
}),
to: PropTypes.string.isRequired
};
export default withRouter(NavButton);
用法:
<NavButton to="/somewhere">Click me</NavButton>
我已经测试v4好几天了。到目前为止,我很喜欢它!过一段时间就明白了。
我也有同样的问题,我发现用下面的方法处理它是最好的(甚至可能是它的目的)。它使用state、三元操作符和<Redirect>。
在构造函数()中
this.state = {
redirectTo: null
}
this.clickhandler = this.clickhandler.bind(this);
在render()中
render(){
return (
<div>
{ this.state.redirectTo ?
<Redirect to={{ pathname: this.state.redirectTo }} /> :
(
<div>
..
<button onClick={ this.clickhandler } />
..
</div>
)
}
在clickhandler()中
this.setState({ redirectTo: '/path/some/where' });
希望能有所帮助。让我知道。