Does the library support outlet?

[nvmnghia]

Why it is needed?

Say many routes share the sidebar.

• With React Router, I can make sure the sidebar is only rendered once.
• With chicane: how should I do it?
  Thx alot, I like small libs like this but it's not popular so I can't find any answer.

Possible implementation

No response

Code sample

[zoontek]

@nvmnghia This library doesn't require outlets, as it only performs the matching for you.

Let' say you have this router:

const Router = createRouter({
  Home: "/",
  ...createGroup("Foo", "/foo", { Area: "/*", List: "/", Page: "/:id" }),
  ...createGroup("Bar", "/bar", { Area: "/*", List: "/", Page: "/:id" }),
});

With basic sidebar links:

const SidebarLink = ({ children, to, active }: { children: string; to: string; active: boolean }) => {
  const { onClick } = useLinkProps({ href: to });

  return (
    <a onClick={onClick} style={{ fontWeight: active ? "bold" : "normal" }}>
      {children}
    </a>
  );
};

A sidebar:

const Sidebar = () => {
  const routeName = Router.useRoute(["Home", "FooArea", "BarArea"])?.name;

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <SidebarLink active={routeName === "Home"} to={Router.Home()}>Home</SidebarLink>
      <SidebarLink active={routeName === "FooArea"} to={Router.FooList()}>Foo</SidebarLink>
      <SidebarLink active={routeName === "BarArea"} to={Router.BarList()}>Bar</SidebarLink>
    </div>
  );
};

Some areas (the page content):

const FooArea = () => {
  const route = Router.useRoute(["FooList", "FooPage"]);

  return match(route)
    .with({ name: "FooList" }, () => <Link to={Router.FooPage({ id: "test" })}>Go to foo test</Link>)
    .with({ name: "FooPage" }, ({ params }) => <h1>FooPage: {params.id}</h1>)
    .otherwise(() => <h1>404</h1>);
};

const BarArea = () => {
  const route = Router.useRoute(["BarList", "BarPage"]);

  return match(route)
    .with({ name: "BarList" }, () => <Link to={Router.BarPage({ id: "test" })}>Go to bar test</Link>)
    .with({ name: "BarPage" }, ({ params }) => <h1>BarPage: {params.id}</h1>)
    .otherwise(() => <h1>404</h1>);
};

And finally, your Appcomponent:

const App = () => {
  const route = Router.useRoute(["Home", "FooArea", "BarArea"]);

  return (
    <div style={{ display: "flex", flexDirection: "row" }}>
      <Sidebar />

      <div style={{ display: "flex", flex: 1 }}>
        {match(route)
          .with({ name: "Home" }, () => <h1>Home</h1>)
          .with({ name: "FooArea" }, () => <FooArea />)
          .with({ name: "BarArea" }, () => <BarArea />)
          .otherwise(() => <h1>404</h1>)}
      </div>
    </div>
  );
};

You'll notice that the minimal amount of components are re-rendered inside your sidebar:

Screen.Recording.2025-12-01.at.12.11.14.mov

When you are switching between app "areas" (Home, Foo, Bar), both the sidebar and the page content change.

But when your are navigating inside one of your areas (Foo, Bar), the whole sidebar is not re-rendered (only the corresponding SidebarLink - because of useLinkProps).

[zoontek]

PS: I created a Sidebar component to illustrate the fact that you can use useRoute as much as you want, chicane will optimize re-renders for you (only on useRoute result change), but to simplify the code, you can inline it too, as both Sidebar and App are matching the same routes:

const App = () => {
  const route = Router.useRoute(["Home", "FooArea", "BarArea"]);

  return (
    <div style={{ display: "flex", flexDirection: "row" }}>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <SidebarLink active={route?.name === "Home"} to={Router.Home()}>Home</SidebarLink>
        <SidebarLink active={route?.name === "FooArea"} to={Router.FooList()}>Foo</SidebarLink>
        <SidebarLink active={route?.name === "BarArea"} to={Router.BarList()}>Bar</SidebarLink>
      </div>

      <div style={{ display: "flex", flex: 1 }}>
        {match(route)
          .with({ name: "Home" }, () => <h1>Home</h1>)
          .with({ name: "FooArea" }, () => <FooArea />)
          .with({ name: "BarArea" }, () => <BarArea />)
          .otherwise(() => <h1>404</h1>)}
      </div>
    </div>
  );
};