我刚刚把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导航?
当前回答
如果使用函数组件,请使用useHistory钩子
你可以使用useHistory钩子获取历史实例。
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
return (
<button onClick={() => history.push("/about")}>
Click me
</button>
);
}
useHistory钩子使您可以访问用于导航的历史实例。
在页面组件中使用history属性
React Router向页面组件注入一些属性,包括历史记录。
class HomePage extends React.Component {
render() {
const { history } = this.props;
return (
<div>
<button onClick={() => history.push("/projects")}>
Projects
</button>
</div>
);
}
}
用throuter包装子组件以注入路由器属性
withRouter包装器将路由器属性注入组件。例如,您可以使用此包装器注入路由器注销按钮组件放置在用户菜单。
import { withRouter } from "react-router";
const LogoutButton = withRouter(({ history }) => {
return (
<button onClick={() => history.push("/login")}>
Logout
</button>
);
});
export default LogoutButton;
其他回答
this.props.history.push("/url")
如果您在组件中没有找到this.props.history可用, 那就试试这个
import {withRouter} from 'react-router-dom'
export default withRouter(MyComponent)
第一步:只需要在上面导入一个东西:
import {Route} from 'react-router-dom';
第二步:在Route中,传递历史记录:
<Route
exact
path='/posts/add'
render={({history}) => (
<PostAdd history={history} />
)}
/>
第三步:历史被接受为下一个组件的道具的一部分,所以你可以简单地:
this.props.history.push('/');
这很简单,也很有力。
最简单的方法是:
this.props.history.push(“/new/url”)
注意:
如果历史道具不可用,你可以将它从父组件传递到你想调用该动作的组件。
你也可以简单地使用props来访问历史对象:
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+属性初始化器初始化状态。如果你感兴趣的话,也看看这里。