Properly mock location in app stories

lib/router/src/router.tsx

@@ -9,6 +9,7 @@ import {
   RouteComponentProps,
   LocationContext,
   NavigateFn,
+  History,
 } from '@reach/router';
 import { ToggleVisibility } from './visibility';
 import { queryFromString, parsePath, getMatch, StoryData } from './utils';
@@ -106,3 +107,4 @@ export { QueryLocation as Location };
 export { Route };
 export { queryNavigate as navigate };
 export { LocationProvider };
+export { History };

lib/ui/src/app.stories.tsx

@@ -13,19 +13,18 @@ export default {
   parameters: {
     layout: 'fullscreen',
   },
-  decorators: [
-    ((StoryFn, c) => (
-      <LocationProvider
-        key="location.provider"
-        history={createHistory(createMemorySource('/?path=/story/story--id'))}
-      >
-        <StoryFn {...c} />
-      </LocationProvider>
-    )) as DecoratorFn,
-  ],
 };
 
-export const Default = () => <App provider={(new FakeProvider() as unknown) as Provider} />;
-export const LoadingState = () => (
-  <App provider={(new PrettyFakeProvider() as unknown) as Provider} />
-);
+const Story = (args: React.ComponentProps<typeof App>) => <App {...args} />;
+
+export const Default = Story.bind({});
+Default.args = {
+  provider: (new FakeProvider() as unknown) as Provider,
+  history: createHistory(createMemorySource('/?path=/story/story--id')),
+};
+
+export const LoadingState = Story.bind({});
+LoadingState.args = {
+  ...Default.args,
+  provider: (new PrettyFakeProvider() as unknown) as Provider,
+};

lib/ui/src/index.tsx

@@ -2,7 +2,7 @@ import { DOCS_MODE } from 'global';
 import React, { FunctionComponent } from 'react';
 import ReactDOM from 'react-dom';
 
-import { Location, LocationProvider } from '@storybook/router';
+import { Location, LocationProvider, History } from '@storybook/router';
 import { Provider as ManagerProvider, Combo } from '@storybook/api';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
 import { HelmetProvider } from 'react-helmet-async';
@@ -28,12 +28,13 @@ const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.
 
 export interface RootProps {
   provider: Provider;
+  history: History;
 }
 
-export const Root: FunctionComponent<RootProps> = ({ provider }) => (
+export const Root: FunctionComponent<RootProps> = ({ provider, history }) => (
   <Container key="container">
     <HelmetProvider key="helmet.Provider">
-      <LocationProvider key="location.provider">
+      <LocationProvider key="location.provider" history={history}>
         <Location key="location.consumer">
           {(locationData) => (
             <ManagerProvider