我刚刚把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导航?
当前回答
我为此纠结了一段时间——如此简单,却又如此复杂,因为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>
其他回答
this.props.history.push("/url")
如果您在组件中没有找到this.props.history可用, 那就试试这个
import {withRouter} from 'react-router-dom'
export default withRouter(MyComponent)
对于那些在使用React router或React router Dom完全初始化路由器之前需要重定向的人,你可以通过简单地访问历史对象并在app.js的结构中将一个新状态推到它上来提供重定向。考虑以下几点:
function getSubdomain(hostname) {
let regexParse = new RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
let urlParts = regexParse.exec(hostname);
return hostname.replace(urlParts[0], '').slice(0, -1);
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
hostState: true
};
if (getSubdomain(window.location.hostname).length > 0) {
this.state.hostState = false;
window.history.pushState('', '', './login');
} else {
console.log(getSubdomain(window.location.hostname));
}
}
render() {
return (
<BrowserRouter>
{this.state.hostState ? (
<div>
<Route path="/login" component={LoginContainer}/>
<Route path="/" component={PublicContainer}/>
</div>
) : (
<div>
<Route path="/login" component={LoginContainer}/>
</div>
)
}
</BrowserRouter>)
}
}
在这里,我们想要改变依赖于子域的输出路由,通过在组件呈现之前与历史对象交互,我们可以有效地重定向,同时仍然保留我们的路由。
window.history.pushState('', '', './login');
我已经测试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' });
希望能有所帮助。让我知道。
第一步:只需要在上面导入一个东西:
import {Route} from 'react-router-dom';
第二步:在Route中,传递历史记录:
<Route
exact
path='/posts/add'
render={({history}) => (
<PostAdd history={history} />
)}
/>
第三步:历史被接受为下一个组件的道具的一部分,所以你可以简单地:
this.props.history.push('/');
这很简单,也很有力。
我认为@rgommezz涵盖了大多数情况,除了一个我认为非常重要的情况。
// history is already a dependency or React Router, but if don't have it then try npm install save-dev history
import createHistory from "history/createBrowserHistory"
// in your function then call add the below
const history = createHistory();
// Use push, replace, and go to navigate around.
history.push("/home");
这允许我写一个简单的服务与动作/调用,我可以调用从任何组件做导航,而不需要在我的组件上做很多HoC…
目前还不清楚为什么以前没有人提供这种解决方案。我希望它能有所帮助,如果你看到任何问题,请告诉我。