v2 comprehension issues

[apolaina]

Hi 👋 ,

I think I'm having trouble understanding how to use v2.
Sorry in advance, i am not used to asking for help in a Github discussion 🙏 .

Previously i used the storybook-addon-react-router-v6 v1.2.0 with Storybook v7.1.0.
Here was my Menu.stories.tsx story:

import React from 'react';
import { Meta, StoryObj } from '@storybook/react';

import { withRouter } from 'storybook-addon-react-router-v6';

import { Menu, MenuItem } from '@myReactCustomLib';

import { iconMap } from '../../utils/iconMap';

const meta: Meta<typeof Menu> = {
  title: 'Components/Navigation/Menu',
  component: Menu,
  decorators: [withRouter],
};
export default meta;

type Story = StoryObj<typeof Menu>;

export const Default: Story = {
  args: {
    children: (
      <>
        <MenuItem to="/" icon={iconMap.HomeIcon}>
          Home
        </MenuItem>
        <MenuItem to="/a" icon={iconMap.BackpackIcon}>
          Clients
        </MenuItem>
        <MenuItem to="/b" icon={iconMap.BellIcon}>
          Notifications
        </MenuItem>
        <MenuItem to="/c" icon={iconMap.UserIcon}>
          Users
        </MenuItem>
        <MenuItem to="/d" icon={iconMap.SettingsIcon}>
          Calendar
        </MenuItem>
      </>
    ),
  },
};

After upgrading storybook-addon-react-router-v6 form v1.2.0 to v2.0.2 and Storybook from v7.1.0 to v7.2.1, i have this error:

I tried to update my story like this (following the RoutingOutletConfigObject example of this file example), but i have the same error:

import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { withRouter, reactRouterParameters, reactRouterOutlets } from 'storybook-addon-react-router-v6';

import { Menu, MenuItem } from '@myReactCustomLib';

import { iconMap } from '../../utils/iconMap';

const meta: Meta<typeof Menu> = {
  title: 'Components/Navigation/Menu',
  component: Menu,
  decorators: [withRouter],
  parameters: {
    reactRouter: reactRouterParameters({
      routing: reactRouterOutlets([
        {
          path: '',
        },
        {
          path: 'a',
        },
        {
          path: 'b',
        },
        {
          path: 'c',
        },
        {
          path: 'd',
        },
      ]),
    }),
  },
};
export default meta;

type Story = StoryObj<typeof Menu>;

export const Default: Story = {
  args: {
    children: (
      <>
        <MenuItem to="/" icon={iconMap.HomeIcon}>
          Home
        </MenuItem>
        <MenuItem to="/a" icon={iconMap.BackpackIcon}>
          Clients
        </MenuItem>
        <MenuItem to="/b" icon={iconMap.BellIcon}>
          Notifications
        </MenuItem>
        <MenuItem to="/c" icon={iconMap.UserIcon}>
          Users
        </MenuItem>
        <MenuItem to="/d" icon={iconMap.SettingsIcon}>
          Calendar
        </MenuItem>
      </>
    ),
  }
};

My Menu component is:

import { ReactNode } from 'react';

import { sidebarNavStyle } from './Menu.css';

export type MenuProps = {
  children: ReactNode;
};

export const Menu = ({ children }: MenuProps): JSX.Element => (
  <nav>
    <ul className={sidebarNavStyle}>{children}</ul>
  </nav>
);

Menu.displayName = 'Menu';

export default Menu;

And my MenuItem component is like this:

import { ReactElement, ReactNode } from 'react';
import { NavLink } from 'react-router-dom'; // v6.14.2

import {
  menuItemStyle,
  menuItemVariants,
  menuItemWordingStyle,
} from './MenuItem.css';

export type MenuItemProps = {
  /**
   * The `end` prop changes the matching logic for the `active` and `pending` states to only match to the "end" of the NavLink's `to` path.
   * If the URL is longer than `to`, it will no longer be considered active.
   * See [the React Router documentation](https://reactrouter.com/en/main/components/nav-link#end) for more info.
   * @type {boolean}
   * @default [false]
   */
  end?: boolean;
  children: ReactNode;
  icon: ReactElement;
  to: string;
};

export const MenuItem = ({
  end = false,
  children,
  icon,
  to,
}: MenuItemProps) => {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        isActive ? menuItemVariants['active'] : menuItemStyle
      }
      end={end}
    >
      {icon}
      <span className={menuItemWordingStyle}>{children}</span>
    </NavLink>
  );
};

MenuItem.displayName = 'MenuItem';

export default MenuItem;

Glad if you can help!
Have a good day & thank you 🌞

[apolaina]

Apologies! I downgraded storybook-addon-react-router-v6 to v1.2.0 and still have the error.
It is not related to v2.0.2. I will spend more time trying to find the origin of the problem and try to explain why what worked does not work anymore.
But still, I just would like to know if my v2 implementation above is correct :).

[JesusTheHun]

Hi 👋
The issue comes from the fact that you create the JSX when you assign the value to args.children.
If instead you assign the value to a function/component, the JSX will be created when the component is rendered and that is when the router will render your route element, which is your story.

So your fix is the following:

export const Default: Story = {
  args: {
-  children: (
+  children: () => (
      <>
        <MenuItem to="/" icon={iconMap.HomeIcon}>
          Home
        </MenuItem>
      </>
    )
  }
};

Edit : also note that you must provide an element for each of your outlet, just like you would in the real app.