Story with outlet

[lifeiscontent]

Hi there, can you share an example of how to write a story where the component is using an outlet?

I've tried the following, but it doesn't work:

import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import RouteComponent from './RouteComponent'; // the component that contains an outlet
import { Route } from 'react-router-dom';
import ChildRouteComponent from './Forms/ChildRouteComponent';

const meta: ComponentMeta<typeof RouteComponent> = {
  title: 'containers/RouteComponent',
  component: RouteComponent,
  args: {
    children: [
      <Route key="1" index element={<ChildRouteComponent />} />
    ],
  },
  parameters: {
    reactRouter: {
      routePath: '/my-sub-path/*',
    },
  },
};

export default meta;

export const Main: ComponentStoryObj<typeof RouteComponent> = {};

[JesusTheHun]

Hi! Can you please share all the code involved?

[lifeiscontent]

@JesusTheHun this is the code I'm trying to write a story for. https://codesandbox.io/s/recursing-mccarthy-di5kcq?file=/src/App.tsx where ParentRoute is the component I'm trying to write a story for, but also wanting to render the ChildRoute as the element that is used for the Outlet in the ParentRoute

[JesusTheHun]

This is not possible (the way you want it) because of react-router design. Check this : https://codesandbox.io/s/goofy-bush-dqpwzc?file=/src/components/ChildInjector.tsx

All routes must be statically defined inside the JSX, because react-router parse children during the render phase to create the routing tree. The parsing happens as soon as the routing components are rendered, before the children are rendered. Therefore react-router cannot access the JSX of the children.

So for your problem specifically it will require a new feature in this addon. I will see if I can work on it this week-end.

[JesusTheHun]

@lifeiscontent I've published a new version that includes an example of how to do it "your way" but also include a new feature to render outlets more easily.