Solid Router

import { A, Route, Router, useNavigate, useParams, useSearchParams, createAsync, query } from "@solidjs/router";

const getPost = query(async (id) => (await fetch(`/api/posts/${id}`)).json(), "post");

function Post() {
  const params = useParams();
  const post = createAsync(() => getPost(params.id));
  const [search, setSearch] = useSearchParams();
  return <h1>{post()?.title}</h1>;
}

<Router root={Layout}>
  <Route path="/" component={Home} />
  <Route path="/posts/:id" component={Post} preload={({ params }) => getPost(params.id)} />
  <Route path="*404" component={NotFound} />
</Router>;

import {
  A,
  createMemoryHistory,
  createRouter,
  defineRoute,
  notFound,
  Outlet,
  redirect,
  useLoaderData,
  useLocation,
  useNavigate,
  useNavigation,
  useParams,
  useSearch,
} from "@shadow-js/router";
import { loaderCache } from "@shadow-js/router/loaders";
import { notFoundUi } from "@shadow-js/router/not-found";
import { searchValidation } from "@shadow-js/router/search";
import { Show } from "@shadow-js/web";

export interface Post {
  id: string;
  title: string;
}

const posts: Record<string, Post> = {
  "1": { id: "1", title: "First" },
  "2": { id: "2", title: "Second" },
};

/** Ids the loader ran for, so the tests can count loads. */
export const loads: string[] = [];

async function loadPost(id: string): Promise<Post> {
  loads.push(id);
  const found = posts[id];
  if (found === undefined) throw notFound();
  return found;
}

function Layout() {
  const navigation = useNavigation();
  return (
    <div>
      <nav>
        <A to="/" end activeClass="active">
          Home
        </A>{" "}
        <A to="/posts/:id" params={{ id: "2" }}>
          Post 2
        </A>{" "}
        <A to="/posts" search={{ page: 1 }}>
          Posts
        </A>
      </nav>
      <Show when={navigation.pending}>
        <p>loading</p>
      </Show>
      <Outlet />
    </div>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function PostPage() {
  const params = useParams({ from: "/posts/:id" });
  const post = useLoaderData<Post>({ from: "/posts/:id" });
  return (
    <h1>
      {post()?.title} ({params.id})
    </h1>
  );
}

function PostList() {
  const search = useSearch<{ page: number }>({ from: "/posts" });
  const location = useLocation();
  const go = useNavigate();
  return (
    <div>
      <p>page {search.page}</p>
      <button type="button" onClick={() => go(location.pathname, { search: { page: search.page + 1 } })}>
        Next page
      </button>
    </div>
  );
}

const home = defineRoute("/", { component: Home });
const post = defineRoute("/posts/:id", {
  loader: ({ params }) => loadPost(params.id),
  component: PostPage,
  notFound: () => <p>No such post</p>,
});
const list = defineRoute("/posts", {
  validateSearch: (search) => ({ page: Number(search["page"] ?? 1) }),
  component: PostList,
});
const legacy = defineRoute("/old", {
  beforeLoad: () => {
    throw redirect("/");
  },
});
const missing = defineRoute("/*", { component: () => <p>Page not found</p> });
const root = defineRoute("", { id: "root", component: Layout, children: [home, post, list, legacy, missing] });

export function createApp(url: string) {
  return createRouter({
    routes: [root],
    history: createMemoryHistory({ initialEntries: [url] }),
    features: [loaderCache(), notFoundUi(), searchValidation()],
  });
}