React路由器V6链接到= {generateTostring}不工作

Question

我正在将 react-router-dom 从v5升级到v6，我遇到了一个问题。

我有一个生成“到”字符串的函数：

const generateLinkTo = () => {
  switch (widget?.label) { // widget from a useState()
    case "Processed shipments":
      return "/shipments";
    case "Open quote requests":
      return "/quote-requests?display_status=open";
    default:
      return "/";
  }
};

，当我在 link 中使用它时

<Link to={generateLinkTo} className={`text-decoration-none ${textColor}`}>
  ...
</Link>

但是 在我从 React-Router-dom v5更新为v6之前。

Answer 1

在React Router Router V6中，它不再接受 to prop中的功能。

declare function Link(props: LinkProps): React.ReactElement;

interface LinkProps
  extends Omit<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "href"
  > {
  replace?: boolean;
  state?: any;
  to: To;
  reloadDocument?: boolean;
}

type To = Partial<Location> | string;

https：//reactrouter.com/docs/docs/docs/en/en/v6/components/components/components/link

export interface Location extends Path {
  /**
   * A value of arbitrary data associated with this location.
   *
   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.state
   */
  state: unknown;

  /**
   * A unique string associated with this location. May be used to safely store
   * and retrieve data in some other storage API, like `localStorage`.
   *
   * Note: This value is always "default" on the initial location.
   *
   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.key
   */
  key: Key;
}

/**
 * The pathname, search, and hash values of a URL.
 */
export interface Path {
  /**
   * A URL pathname, beginning with a /.
   *
   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.pathname
   */
  pathname: Pathname;

  /**
   * A URL search string, beginning with a ?.
   *
   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.search
   */
  search: Search;

  /**
   * A URL fragment identifier, beginning with a #.
   *
   * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#location.hash
   */
  hash: Hash;
}

Answer 2

链接 react-Router-dom中的组件@6 仅采用字符串或部分 location>位置 object。

似乎只需要调用 generatelinkto 即可将链接的返回到 prop值。

const generateLinkTo = () => {
  switch (widget?.label) {
    case "Processed shipments":
      return "/shipments";
    case "Open quote requests":
      return "/quote-requests?display_status=open";
    default:
    return "/";
  }
};

...

<Link
  to={generateLinkTo()} // <-- invoke and use return value
  className={`text-decoration-none ${textColor}`}
>
  ...
</Link>