使用react-router
我可以使用Link
元素创建由react-router本机处理的链接
我看到它在内部调用this.context.transitiono(…)
我想做一个导航。不是来自链接,而是来自下拉选择(例如)。如何在代码中执行此操作?这个上下文是什么
我看到了导航
mixin,但是没有mixin
,我可以这样做吗
React路由器v5.1.0与挂钩
如果您正在使用React>16.8.0和功能组件,React Router>5.1.0中有一个新的useHistory
hook
从“react router dom”导入{useHistory};
函数HomeButton(){
const history=useHistory();
函数handleClick(){
历史推送(“/主页”);
}
返回(
<;button type=“button”onClick={handleClick}>;
回家吧
<;/button>;
);
}
React路由器v4
使用React Router的v4,有三种方法可以在组件内进行编程路由
- 将
与路由器一起使用
高阶组件 - 使用合成并渲染
<;路线>
- 使用
上下文
React路由器主要是历史
库的包装器历史记录处理与浏览器的窗口的交互。历史记录用于处理浏览器和哈希历史记录。它还提供了一个内存历史记录,对于没有全局历史记录的环境非常有用。这在移动应用程序开发(react native
)和节点单元测试中特别有用
history
实例有两种导航方法:push
和replace
。如果您认为历史记录
是一个访问过的位置数组,push
将向数组中添加一个新位置,replace
将用新位置替换数组中的当前位置。通常,在导航时,您需要使用push
方法
在React Router的早期版本中,您必须创建自己的历史
实例,但在v4中,<;浏览器路由器>,
<;HashRouter>,以及
<;记忆计算器>组件将为您创建浏览器、哈希和内存实例。React Router使与路由器关联的
历史
实例的属性和方法通过路由器
对象下的上下文可用
一,。将与路由器一起使用
高阶组件
withRouter
高阶组件将注入history
对象作为组件的道具。这允许您访问push
和replace
方法,而无需处理上下文
从“react router dom”导入{withRouter}
//这也适用于react router native
const Button=withRouter({history})=>(
<;按钮
type='button'
onClick={()=>;{history.push('/new location')}
&燃气轮机;
点击我!
<;/button>;
))
二,。使用合成并渲染<;路线>
<;路线>组件不仅仅用于匹配位置。您可以渲染无路径路由,它将始终与当前位置匹配。
<;路线>组件通过路由器传递与
相同的道具,因此您可以通过
历史
道具访问历史
方法
从'react router dom'导入{Route}
常量按钮=()=>;(
<;路由渲染={({history})=>(
<;按钮
type='button'
onClick={()=>;{history.push('/new location')}
&燃气轮机;
点击我!
<;/button>;
)}/>;
)
三,。使用上下文*
但您可能不应该
最后一个选项只有在您觉得使用React的上下文模型(React的上下文API在v16中是稳定的)很舒服时才应该使用
const按钮=(道具,上下文)=>;(
<;按钮
type='button'
onClick={()=>{
//context.history.push==history.push
context.history.push(“/new location”)
}}
&燃气轮机;
点击我!
<;/button>;
)
//您需要指定上下文类型,以便
//在组件中可用
Button.contextTypes={
历史记录:React.PropTypes.shape({
推送:需要React.PropTypes.func
})
}
1和2是实现的最简单的选择,因此对于大多数用例,它们是您的最佳选择