Wrap a story with a Layout Route

[ivanjonas]

Hi there,

I am struggling with writing stories for components that assume an ancestor Route that renders its contents inside an . Hoping I can describe my situation and get big brains to find a solution.

I have a very simple and plain ComponentX that renders some styled HTML, no data fetching or even routing needed. It has a single, simple story.

I also have a GlobalStyles component responsible for the task of applying global styles (such as a dark background color to the ). Likely irrelevant, but uses the css-in-js library Emotion to apply styles to the document . This component does not accept children, but rather renders an and is meant to be used as a layout route.

export const Global = () => (
  <>
    <EmotionGlobalCss  styles={{ body: { backgroundColor: 'black' } }} />
    <Outlet />
  </>
);

Now, ComponentX is meant to be used by various pages in a dark-themed website. I expect the application to render a Route tree akin to this:

  <Router>
    <Routes>
      <Route element={<GlobalStyles/>} >
        <Route path="login">
          <Route index element={<Login />} />
          <Route path="multifactor" element={<Mfa />} />
        </Route>

Not pictured: the and pages call ComponentX.

Now, I've struggled mightily with creating a custom Storybook decorator that wraps each Story with this <Route element={<GlobalStyles/>} > component. How can this be accomplished, whether with or without this Storybook addon?

(I also realized that I can make a simple wrapper component and throw it around the , but 1) I may use this pattern to create stories for other components that assume other, intermediate layout routes, and 2) I'm just stubborn and want to solve this problem.

Sincere thanks for your time 🙏

[ivanjonas]

If anyone finds this issue, I posted the same question at StackOverflow: https://stackoverflow.com/questions/74722305/how-can-you-wrap-a-story-with-a-react-router-layout-route

[JesusTheHun]

Since your question have been answered on SO, I'm gonna close this one. Feel free to reopen if you still have an issue ;)