# How to run Remix <Link /> Component in Storybook

If you've encountered the error `useHref() may be used only in the context of a <Router> component` while trying to integrate Remix's `<Link />` component into Storybook, fear not. In this guide, we'll walk through a solution that involves creating a decorator in the `preview.tsx` file of your Storybook setup using the `createRemixStub` utility.

## **The Problem:**

One of the common challenges developers face when working with Remix and Storybook is the error message that suggests the use of `useHref()` is limited to the context of a `<Router>` component. This issue often arises when trying to render Remix components, especially `<Link />`, in the isolated environment of Storybook.

The error message might look something like this:

```xml
useHref() may be used only in the context of a <Router> component.
```

This error can be frustrating, especially when you're excited about integrating Remix into your Storybook workflow. Fortunately, there's a solution that involves creating a decorator to set up the necessary context for Remix components to function correctly.

## **The Solution: Creating a Decorator with** `createRemixStub`

To overcome the aforementioned error and successfully run Remix `<Link />` components in Storybook, we'll leverage the `createRemixStub` utility. This utility allows us to set up a minimal Remix environment within Storybook, providing the required context for components like `<Link />` to work seamlessly.

### **Step 1: Install Dependencies**

Make sure you have the necessary dependencies for testing in Remix installed in your project. If not, you can install them using npm or yarn:

```bash
npm install @remix-run/testing
# or
yarn add @remix-run/testing
```

Make sure to install the same version of @remix-run/react and @remix-run/testing!

### **Step 2: Create a Remix Stub in** `preview.tsx` and use in a decorator

In your Storybook setup, locate the `preview.tsx` file. If it doesn't exist, create one in the `.storybook` directory. Add the following code to create a Remix stub:

```typescript
import type {Preview} from '@storybook/react';
import {createRemixStub} from '@remix-run/testing';

const preview: Preview = {
  parameters: {
    // ...
  },
  decorators: [
    (Story) => {
      const RemixStub = createRemixStub([
        {
          path: '*',
          action: () => ({redirect: '/'}),
          loader: () => ({redirect: '/'}),
          Component: () => <Story />,
        },
      ]);

      return <RemixStub />;
    },
  ],
};
```

With these steps in place, you should now be able to run Remix `<Link />` components in Storybook without encountering the previous error.