Question

我想确保在组件之间导航的URL是有效的并且是强类型的，这意味着：具有匹配的参数和查询字符串参数。因此，当组件更改其接受的URL时，它将破坏所有无效用法。我有一个潜在的解决方案，如下所示。 除了下面写的以外，还有解决我问题的更好的方法吗？我使用的是react-router 3，但是也欢迎使用4或其他软件包的解决方案。该解决方案必须支持链接到组件 y 和<的组件 x em> y 链接回 x 。

这是一个潜在的解决方案：

getSomeComponentUrl.ts

export interface ISomeComponentQuery {
    someArgument?: string;
    origin?: 'x' | 'y' | 'z';
}

export interface ISomeComponentParams {
    id?: string;
}

export const getSomeComponentUrl = (input: ISomeComponentQuery & ISomeComponentParams ) => 
    getUrlWithId('someComponentRootUrl', input);

getUrlWithId.ts

import { stringify } from 'query-string';

export function getUrlWithId(root: string, input: { id?: string }): string {
    const { id, ...queryStringParams } = input;
    if (!id) {
        throw Error(`"/${root}/" requires an id.`);
    }
    return `/${root}/${input.id}?${stringify(queryStringParams)}`;
}

someOtherComponent.ts

import { getSomeComponentUrl } from '../someComponent/getSomeComponentUrl';

getSomeComponentUrl({ id: item.id, origin: 'x', someArgument: this.someArgument });

此方法的缺点是必须为每个可以导航到的组件创建getSomeComponentUrl函数。

Answer 1

您可以在基础getSomeComponentUrl中提取class，使该函数成为通用类型，默认情况下，将扩展基类的所有组件都可以来回“导航”。该基类也可以实现专用的id字符串，以确保在创建组件时该字符串存在

但是提供具有键入功能的界面是您需要的最佳解决方案。

组件之间的强类型导航

1 个答案: