React Router 5.1.0使用useHistory做页面跳转导航
从React Router v5.1.0开始,新增了useHistory钩子(hook),如果是使用React >16.8.0,编写以下函数组件,使用useHistory即可实现编程时页面跳转导航。示例:import { useHistory } from "react-router-dom";function HomeButton() {const history = useHistory
·
从React Router v5.1.0开始,新增了useHistory钩子(hook),如果是使用React >16.8.0,编写以下函数组件,使用useHistory即可实现编程时页面跳转导航。
示例:
import { useHistory } from "react-router-dom";
function HomeButton() {
const history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
React Router v4编程式页面跳转的方式(补充)
如果是React Router v4,可以使用以下方法:
- 使用withRouter组件
- 使用<Route>标签
- 使用context
1、使用withRouter组件
withRouter组件将注入history对象作为该组件的属性。这样,不需要处理context,可直接访问push和replace方法。
示例:
import { withRouter } from 'react-router-dom'
const Button = withRouter(({ history }) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
))
2、使用<Route>标签
<Route>组件不仅用于匹配位置。 您可以渲染无路径的路由,它始终与当前位置匹配。 <Route>组件传递与withRouter相同的属性,因此能够通过history的属性访问history的方法。
import { Route } from 'react-router-dom'
const Button = () => (
<Route render={({ history}) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
)} />
)
3、使用context
这个方法不推荐,context api不是很稳定。示例如下:
const Button = (props, context) => (
<button
type='button'
onClick={() => {
context.history.push('/new-location')
}}
>
Click Me!
</button>
)
Button.contextTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
})
}
推荐使用方法1和2,实现起来也简单。
更多推荐
所有评论(0)