How to use useLocation hook in storybook?

Question

React

Tell me how to integrate the useLocation hook into the storybook component?

For example, there is a story:

export default {
    component: Header,
    title: 'Header'
};

export const Default = (args) => <Header {...args} />;

The header component uses useLocation :

const usePathname = () => {
        const location = useLocation();
        return location.pathname;
    };

When executing the code, an error occurs:

TypeError
Cannot read properties of undefined (reading 'location')

Can you tell me how to fix this error? And in general, how to properly integrate libraries into a storybook?

Answer 1

useLocation works if the component with it is directly or indirectly inside the Router.
As you know, Router receives a history instance in props, puts it in the context, and useLocation takes it out of the context.
Perhaps in the storybook you forgot to wrap everything in a Router