使用React路由器以编程方式导航

使用react-router我可以使用Link元素创建由react-router本机处理的链接

我看到它在内部调用this.context.transitiono(…)

我想做一个导航。不是来自链接,而是来自下拉选择(例如)。如何在代码中执行此操作?这个上下文是什么

我看到了导航mixin,但是没有mixin,我可以这样做吗

React路由器v5.1.0与挂钩

如果您正在使用React>16.8.0和功能组件,React Router>5.1.0中有一个新的useHistoryhook

从“react router dom”导入{useHistory};
函数HomeButton(){
const history=useHistory();
函数handleClick(){
历史推送(“/主页”);
}
返回(
<button type=“button”onClick={handleClick}>
回家吧
</button>
);
}

React路由器v4

使用React Router的v4,有三种方法可以在组件内进行编程路由

  1. 与路由器一起使用高阶组件
  2. 使用合成并渲染<路线&gt
  3. 使用上下文

React路由器主要是历史库的包装器历史记录处理与浏览器的窗口的交互。历史记录用于处理浏览器和哈希历史记录。它还提供了一个内存历史记录,对于没有全局历史记录的环境非常有用。这在移动应用程序开发(react native)和节点单元测试中特别有用

history实例有两种导航方法:pushreplace。如果您认为历史记录是一个访问过的位置数组,push将向数组中添加一个新位置,replace将用新位置替换数组中的当前位置。通常,在导航时,您需要使用push方法

在React Router的早期版本中,您必须创建自己的历史实例,但在v4中,<浏览器路由器&gt,<HashRouter&gt,以及<记忆计算器&gt组件将为您创建浏览器、哈希和内存实例。React Router使与路由器关联的历史实例的属性和方法通过路由器对象下的上下文可用

一,。将与路由器一起使用高阶组件

withRouter高阶组件将注入history对象作为组件的道具。这允许您访问pushreplace方法,而无需处理上下文

从“react router dom”导入{withRouter}
//这也适用于react router native
const Button=withRouter({history})=&gt(
<按钮
type='button'
onClick={()=>{history.push('/new location')}
&燃气轮机;
点击我!
</button>
))

二,。使用合成并渲染<路线&gt

<路线&gt组件不仅仅用于匹配位置。您可以渲染无路径路由,它将始终与当前位置匹配。<路线&gt组件通过路由器传递与相同的道具,因此您可以通过历史道具访问历史方法

从'react router dom'导入{Route}
常量按钮=()=>(
<路由渲染={({history})=&gt(
<按钮
type='button'
onClick={()=>{history.push('/new location')}
&燃气轮机;
点击我!
</button>
)}/>
)

三,。使用上下文*

但您可能不应该

最后一个选项只有在您觉得使用React的上下文模型(React的上下文API在v16中是稳定的)很舒服时才应该使用

const按钮=(道具,上下文)=>(
<按钮
type='button'
onClick={()=&gt{
//context.history.push==history.push
context.history.push(“/new location”)
}}
&燃气轮机;
点击我!
</button>
)
//您需要指定上下文类型,以便
//在组件中可用
Button.contextTypes={
历史记录:React.PropTypes.shape({
推送:需要React.PropTypes.func
})
}

1和2是实现的最简单的选择,因此对于大多数用例,它们是您的最佳选择

发表评论