Storybook fake Tanstack router

storyBookRouter.tsx

/* eslint-disable react-refresh/only-export-components */
import {
    createMemoryHistory,
    createRootRoute,
    createRoute,
    createRouter,
    useRouterState,
    type NotFoundRouteProps,
} from "@tanstack/react-router";
import { createContext, useContext, type ReactNode } from "react";

//#region Dummy story router
function RenderStory() {
    const storyFn = useContext(CurrentStoryContext);
    if (!storyFn) {
        throw new Error("Storybook root not found");
    }
    return storyFn();
}

export const CurrentStoryContext = createContext<(() => ReactNode) | undefined>(undefined);

function NotFoundComponent(_props: NotFoundRouteProps) {
    const state = useRouterState();
    return (
        <div>
            <i>Warning:</i> Simulated route not found for path <code>{state.location.href}</code>
        </div>
    );
}

const storyPath = "/__story__";
const storyRoute = createRoute({
    path: storyPath,
    getParentRoute: () => rootRoute,
    component: RenderStory,
});

const rootRoute = createRootRoute({
    notFoundComponent: NotFoundComponent,
});
rootRoute.addChildren([storyRoute]);

export const storyRouter = createRouter({
    history: createMemoryHistory({ initialEntries: [storyPath] }),
    routeTree: rootRoute,
});
//#endregion

export function storyRouterDecorator(storyFn: () => ReactNode) {
    return (
      <CurrentStoryContext.Provider value={storyFn}>
          <RouterProvider router={storyRouter} />
      </CurrentStoryContext.Provider>
    );
}

This works as long as you do not need any actual actions (ie. navigation somewhere else) to work inside Storybook.

The router contains a single route that just renders the story.

cool, just the story stayed stale so this should help:
`/* eslint-disable react-refresh/only-export-components */
import {
createMemoryHistory,
createRootRoute,
createRoute,
createRouter,
RouterProvider,
useRouterState,
type NotFoundRouteProps,
} from "@tanstack/react-router";
import { createContext, useContext, type ReactElement, type ReactNode } from "react";
import type { DecoratorFunction } from "storybook/internal/csf";

//#region Dummy story router
function RenderStory() {
const storyFn = useContext(CurrentStoryContext);
if (!storyFn) {
throw new Error("Storybook root not found");
}
return storyFn;
}

export const CurrentStoryContext = createContext<(ReactElement) | undefined>(undefined);

function NotFoundComponent(_props: NotFoundRouteProps) {
const state = useRouterState();
return (

Warning: Simulated route not found for path {state.location.href}

);
}

const storyPath = "/story";
const storyRoute = createRoute({
path: storyPath,
getParentRoute: () => rootRoute,
component: RenderStory,
});

const rootRoute = createRootRoute({
notFoundComponent: NotFoundComponent,
});
rootRoute.addChildren([storyRoute]);

export const storyRouter = createRouter({
history: createMemoryHistory({ initialEntries: [storyPath] }),
routeTree: rootRoute,
});
//#endregion

export const storyRouterDecorator: DecoratorFunction = (Story) => {
return (
<CurrentStoryContext.Provider value={}>

</CurrentStoryContext.Provider>
);
}`