Cannot use `useStoryElement` at more than one route

[eloiqs]

Consider this exemple

export const Default = {
  parameters: {
    reactRouter: reactRouterParameters({
      routing: [
        { path: '/', useStoryElement: true },
        { path: '/demo', useStoryElement: true },
      ],
    }),
  },
} as StoryObj<any>;

When the story component navigates to /demo a blank page is rendered. In the console there is even a warning from history.ts history.ts:501 Matched leaf route at location "/demo" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

[JesusTheHun]

Can you explain why you want to render the story at two different locations ?

[eloiqs]

I want to render my component with params at a given route, and then allow the user to click on some buttons that perform a navigation without the router throwing an error boundary because that route is not configured. In 1.0 any navigation that wasnt handled kept rendering the current component.

[eloiqs]

Essentially I'm trying to handle 404s https://github.com/JesusTheHun/storybook-addon-react-router-v6/issues/51

[eportet]

Was there a resolution to this since it was closed?

I have a good example to showcase for this feature. In our app we have one component that displays the login and signup pages. So in our Router we have the following:

const Router = () => {
  return (
    <Routes>
      <Route path={ROUTES.SIGNUP.path} element={<AuthPage />} />
      <Route path={ROUTES.LOGIN.path} element={<AuthPage />} />
    </Routes>
  )
}

In the component we have a Link button that allows you to switch between /login and /signup paths. I implemented my story like so:

export const Auth: Story = {
  parameters: {
    reactRouter: reactRouterParameters({
      location: {
        path: '/login',
      },
      routing: [
        { path: '/login', useStoryElement: true },
        { path: '/signup', useStoryElement: true },
      ],
    }),
  },
}

But the above resulted in the same warning as OP. I had to do the following to fix it:

routing: [
  { path: '/login', useStoryElement: true },
- { path: '/signup', useStoryElement: true },
+ { path: '/signup', Component: AuthPage },
]

This works fine, but this results in the router thinking that it is still on the same /login page after I click on the link that takes me to /signup.

[JesusTheHun]

Hum, that is a valid case.

I don't understand why you say the router still think you are on the login page though. Your component renders based on the url, and the url changes, then it should work properly, doesn't it ?

[eportet]

Maybe it's clearer in the video. When I click on the SignUp button, which is a Link that redirects to /signup, it doesn't show up on the logs of the Addon that the route was changed. But when I go back to /login I can see that it picks up that route change and logs it.

Not a huge deal tbh, just wanted to point out in case it's a bug?

[JesusTheHun]

@eportet 2.0.11 is out and allow to inject the story multiple times. Can you check and confirm that it behaves as you expect ?

[eportet]

Works like a charm thank you!

[JesusTheHun]

@eloiqs you might be interested in this ;)