How can we use useNavigate in stories?

[danprince]

We develop most of our components as stories (using ladle.dev) and we're running into problems with any component that uses useNavigate internally.

Understandably, useNavigate relies on there being some routing context available from Remix, but when that context isn't there (such as inside a story) the whole component blows up.

createRemixStub seemed like a potentially promising way to wrap our entire storybook in a <RemixStub> element to create those contexts, but RemixStub doesn't take a children prop.

A lot of the time it's possible to keep useNavigate out of our reusable components, but in some we're using React Aria's RouterProvider which requires the router's navigate function.

As a workaround, we're using a useNavigateSafe wrapper which wraps useNavigate in a try-catch and gives back a no-op function when the context isn't there.

import { useNavigate } from "@remix-run/react";

/**
 * A version of `useNavigate` that works fine inside stories and other contexts
 * where Remix's router isn't available. Calling the original `useNavigate` in
 * those contexts throws an error.
 *
 * ⚠️ __Important__ If you use this function outside of Remix, such as in a
 * story, then the navigation will not actually happen.
 */
export const useNavigateSafe = () => {
  try {
    return useNavigate();
  } catch (err) {
    return () => {};
  }
};

This works fine, but it feels like an unreasonably hacky workaround for a relatively common problem.

It would be great if the @remix-run/testing package exported something that would create a dummy/memory router, which would allow people to use useNavigate outside of Remix.

We also run into the same kind of problem with useLocation and useParams and having a way to set the params as part of the stub/router provider would be very helpful.

[aximili]

This is what we did that allowed putting MyComponent (which uses useNavigate) in Storybook

import type { Meta, StoryObj } from '@storybook/react';
import { withRouter } from 'storybook-addon-remix-react-router'; // <-- add this
...

const meta: Meta<typeof MyComponent> = {
  title: 'My Group/MyComponent',
  component: MyComponent,
  tags: ['autodocs'],
  decorators: [withRouter], // <-- add this
};