history库中的push方法参数类型探析

362 阅读1分钟

一、缘起

image.png

图片内容来源:v5.reactrouter.com/web/api/his…

直觉push方法的第一个参数path应当是一个字符串,但是在使用的时候看到过这样的传参方式:

image.png

为了探明究竟,需要看看源码。

二、源码

首先找到push方法的源码,再去寻找第一个参数的类型定义To

image.png

查看To类型,发现第一个参数可以是string类型或者是PartialPath

image.png

而PartialPath是由Path决定的,同时用到了TypeScript的Partial方法

image.png

Path对象

image.png

Partial方法的作用是可以使Path对象中的属性都变成可选

image.png

三、疑问

根据上面的推导,To类型依据的Path对象并不包括state属性,为什么传参的时候可以直接在对象里面传state呢?

原因是版本问题,本文的源码均为最新版本(5.1.0),而开篇举的例子是更老的版本(4.10.1)的传参方式。最新版本是不可以在第一个参数对象里面传state的,如果想要传state,请放在第二个参数里面哦。

下图👇🏻是4.10.1版本push方法的部分源码,可以看到之前那种传参方式的隐含问题。

image.png

四、结论

push方法第一个参数可以传字符串或者对象,但是这个对象是否可以包含state需要视history库的版本而定,建议不管是哪个版本如果想传state的话都在第二个参数里面传。