React Router v6 Link to={generateToString} not working

user_17381756 0
Viewed 38

I'm upgrading react-router-dom from v5 to v6 and I've encountered a problem.

I have a function which generates a 'to' string:

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 "/";
  }
};

However, when I use this in the Link the <a> href is rendered as '/':

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

This worked before I updated from react-router-dom v5 to v6.

react-router-dom react-router reactjs
2 Answers

In React Router v6 it no longer accepts a function in the 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/en/v6/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;
}

https://github.com/remix-run/history/blob/3e9dab413f4eda8d6bce565388c5ddb7aeff9f7e/packages/history/index.ts#L68

user_34991150

The Link component in react-router-dom@6 takes only a string or partial location object.

It seems the generateLinkTo just needs to be invoked to return the link's to prop value.

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>
user_86908570
Related