关于React-router的编程式导航

[MrTreasure]

react-router

编程式导航

在任意的路由包裹下的子组件中可以获取到this.props.histroy对象，这个对象具有一些方法及属性可以用来进行编程式导航

interface History {
    length: number;
    action: Action;
    location: Location;
    push(path: Path, state?: LocationState): void; // 调用push前进到一个地址,可以接受一个state对象，就是自定义的路由数据
    push(location: LocationDescriptorObject): void; // 接受一个location的描述对象
    replace(path: Path, state?: LocationState): void; // 用页面替换当前的路径，不可再goBack
    replace(location: LocationDescriptorObject): void; // 同上
    go(n: number): void; // 往前走多少也页面
    goBack(): void; // 返回一个页面
    goForward(): void; // 前进一个页面
    block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
    listen(listener: LocationListener): UnregisterCallback;
    createHref(location: LocationDescriptorObject): Href;
}

这个对象封装了H5的API，这样就可以通过编程的方法进行导航，其中的LocationDescriptorObject是一个用于描述位置信息的对象

interface LocationDescriptorObject {
    pathname?: Pathname; // 要前进的地址
    search?: Search; // query参数
    state?: LocationState; // 路由自定义的数据
    hash?: Hash;
    key?: LocationKey;
}

这个对象用来描述接下来路由进行的动作的行为。
从这里我们可以与vue-router做一个简单的对比。

react-router的history模式下具有的功能，hash模式还不确定是否有这个对象。并且其中search参数是一个字符串，还得手动改写为key/value的对象。

vue-router封装了hash模式和history模式的区别，使得this.$router提供了一致性的体验。并且可以直接通过this.$router.params.xx this.$router.query.xx分别访问路径参数以及query参数

可见细节之处vue的优化还要好一些