My Workaround for Named Routes.

[SuspiciousLookingOwl]

I like the idea of named routes, which is a feature that doesn't exist yet on Solid Router. So, I decided to make my own named route implementation on my app, here's how it looks like:

Playground (I think anchor doesn't work on the playground, but it should work fine outside of playground)

// routes declaration
enum Routes {
  Home = "/*",
  User = "/users/:id?",
}

// router definition for solid router
import type { RouteDefinition } from "@solidjs/router";

const routeDefinitions: RouteDefinition[] = [
  { path: Routes.Home, component: () => <Home /> },
  { path: Routes.User, component: () => <User /> },
];

// utils for path params
type PatchPathParams = Record<
  string,
  string | number | boolean | null | undefined
>;

const patchPath = (path: string, params?: PatchPathParams): string => {
  if (params) {
    for (const [key, value] of Object.entries(params)) {
      path = path.replace(
        new RegExp(`(?<!\\w):${key}\\??(?!\\w)`, "g"),
        encodeURIComponent(value?.toString() || "")
      );
    }
  }
  path = path.replace(/\/?:\w+\?/g, ""); // replacing unpassed optional params
  return path;
};

// custom hook, replacement for Solid Router's useNavigate
import {
  useNavigate as useSolidNavigate,
  type NavigateOptions as SolidNavigateOptions,
} from "@solidjs/router";

type NavigateOptions = SolidNavigateOptions & { params: PatchPathParams };

const useNavigate = <T extends string = string>() => {
  const solidNavigate = useSolidNavigate();

  const navigate = (to: T, options?: Partial<NavigateOptions>) => {
    solidNavigate(patchPath(to as string, options?.params), options);
  };

  return navigate;
};

// custom Anchor component, replacement for Solid Router's Anchor
import { A as SolidA, type AnchorProps } from "@solidjs/router";
import { type ParentComponent } from "solid-js";

type AProps = { params?: PatchPathParams } & AnchorProps;

const A: ParentComponent<AProps> = (props) => {
  return (
    <SolidA {...props} href={patchPath(props.href, props.params)}>
      {props.children}
    </SolidA>
  );
};

// usage
import { type Component } from "solid-js";
import { render } from "solid-js/web";
import { useParams, MemoryRouter } from "@solidjs/router";

const Home: Component = () => {
  const navigate = useNavigate();

  return (
    <>
      <A
        style={{ "margin-right": "0.5rem" }}
        href={Routes.User}
        params={{ id: 1 }}
      >
        User 1
      </A>
      
      <button
        style={{ "margin-right": "0.5rem" }}
        onClick={() => navigate(Routes.User, { params: { id: 2 } })}
      >
        User 2
      </button>
      
      <button
        style={{ "margin-right": "0.5rem" }}
        onClick={() => navigate(Routes.User)}
      >
        User Without Id
      </button>
    </>
  );
};

const User: Component = () => {
  const params = useParams<{ id?: string }>();

  return <div>User Page {params.id || "without ID"}</div>;
};

render(
  () => <MemoryRouter>{routeDefinitions}</MemoryRouter>,
  document.getElementById("app")!
);

Related issues:

• [feature request] Add 'params' prop to the 'A' component #216
• Add named routes #61