How would you handle navigation from inside a story?

[todor-a]

I have a story for component that renders a list of items and each item is a <NavLink> to a different route.

Say, the base route is /foo and clicking on an item redirects to /foo/42.

Here is my setup:

const Template: React.FC<ComponentProps<typeof FooList>> = ({ ...props }) => {
    return (
        <FooList
            {...props}
        />
    );
};

const meta = {
    title: 'Foo List',
    component: Template,
    decorators: [withRouter],
} satisfies Meta<typeof FooList>;

type Story = StoryObj<typeof meta>;

export const WithoutSelected: Story = {
    parameters: {
        reactRouter: reactRouterParameters({
            location: {
                path: '/foo,
            },
            routing: {
                useStoryElement: true,
                path: '/foo',
            },
        }),
    },
};

export const WithSelected: Story = {
    parameters: {
        reactRouter: reactRouterParameters({
            location: {
                pathParams: { id: '42' },
                path: '/foo/:id',
            },
            routing: {
                path: '/foo/:id',
            },
        }),
    },
};

export default meta;

It fails with Error: No route matches URL "/foo/42".

In short, I wish to load a different story upon clicking a link in the original story.

Thanks!

[JesusTheHun]

Hi,

I wish to load a different story upon clicking a link

To be specific, you want to navigate through the storybook or just render a different component at the same place ?

The former is not possible, the latter is just conventional routing :

export const RouteWithChildren = {
  render: () => (
    <main>
      <h1>List of items</h1>
      <ul>
        <li>
          <NavLink to={'42'}>Book 42</NavLink>
        </li>
      </ul>

      <Outlet />
    </main>
  ),
  parameters: {
    reactRouter: reactRouterParameters({
      location: {
        path: '/book',
      },
      routing: {
        path: '/book',
        useStoryElement: true,
        children: [
          {
            path: ':bookId',
            Component: () => {
              const routeParams = useParams();
              return (
                <section>
                  <h2>Book #{routeParams.bookId}</h2>
                  <p>Book details</p>
                </section>
              );
            },
          },
        ],
      },
    }),
  },
};

Note you can also use the routing helper reactRouterOutlet.

[todor-a]

It works like a charm. Thank you!