Storybook 擴充功能 Remix React Router

在你的 stories 中使用 Remix React Router。

✨注意✨
此套件已重新命名為 storybook-addon-remix-react-router。
儲存庫也已重新命名，所以你現在在正確的頁面上。
為了支援 Storybook 8，此遷移是必要的。

近期變更

✅ 支援 Storybook 8，使用 storybook-addon-remix-react-router@3。
✅ 你現在可以使用 useStoryElement 在多個點注入 story。
✅ routing 參數現在接受一個字串，該字串將同時用作路由路徑和位置路徑名稱。

開始使用

安裝套件

npm i -D storybook-addon-remix-react-router

將其添加到你的 Storybook 設定中

// .storybook/main.ts

export default {
  addons: ['storybook-addon-remix-react-router'],
} satisfies StorybookConfig;

裝飾元件的所有 stories

若要將路由器新增至元件的所有 stories，只需將其新增至 decorators 陣列即可。

請注意，parameters.reactRouter 是選用的，預設情況下，路由器將在 / 呈現元件。

import { withRouter } from 'storybook-addon-remix-react-router';

export default {
  title: 'User Profile',
  render: () => <UserProfile />,
  decorators: [withRouter],
  parameters: {
    reactRouter: reactRouterParameters({
      location: {
        pathParams: { userId: '42' },
      },
      routing: { path: '/users/:userId' },
    }),
  },
};

裝飾特定的 story

若要變更單一 story 的設定，你可以執行以下操作

import { withRouter } from 'storybook-addon-remix-react-router';

export default {
  title: 'User Profile',
  render: () => <UserProfile />,
  decorators: [withRouter],
};

export const FromHomePage = {
  parameters: {
    reactRouter: reactRouterParameters({
      location: {
        pathParams: { userId: '42' },
        searchParams: { tab: 'activityLog' },
        state: { fromPage: 'homePage' },
      },
      routing: {
        path: '/users/:userId',
        handle: 'Profile',
      },
    }),
  },
};

全域裝飾所有 stories

若要將你專案的所有 stories 包裹在路由器中，請將裝飾器新增至你的 preview.js 檔案中。

// .storybook/preview.js

export default {
  decorators: [withRouter],
  parameters: {
    reactRouter: reactRouterParameters({ ... }),
  }
} satisfies Preview;

位置

若要指定與瀏覽器位置相關的任何內容，請使用 location 屬性。

type LocationParameters = {
  path?: string | ((inferredPath: string, pathParams: Record<string, string>) => string | undefined);
  pathParams?: PathParams;
  searchParams?: ConstructorParameters<typeof URLSearchParams>[0];
  hash?: string;
  state?: unknown;
};

推斷路徑

如果未提供 location.path，則瀏覽器路徑名稱將使用來自 routing 屬性和 pathParams 的合併 path 來產生。

路徑作為函式

你可以提供一個函式給 path。
它將接收來自 routing 屬性和 pathParams 的合併 path 作為參數。
如果函式返回一個 string，它將按原樣使用。如果需要，由你來呼叫來自 react-router 的 generatePath。
如果函式返回 undefined，它將返回預設行為，就像你沒有為 location.path 提供任何值一樣。

路由

你可以將 routing 設定為 createBrowserRouter 接受的任何內容。
為了讓你更輕鬆，storybook-addon-remix-react-router 隨附了一些路由輔助工具

export const MyStory = {
  parameters: {
    reactRouter: reactRouterParameters({
      routing: reactRouterOutlet(<MyOutlet />),
    }),
  },
};

路由輔助工具

以下輔助工具可以直接使用

reactRouterOutlet(); // Render a single outlet
reactRouterOutlets(); // Render multiple outlets
reactRouterNestedOutlets(); // Render multiple outlets nested one into another
reactRouterNestedAncestors(); // Render the story as an outlet of nested outlets

你也可以建立自己的輔助工具，並使用匯出的類型 RoutingHelper 來協助你

import { RoutingHelper } from 'storybook-addon-remix-react-router';

const myCustomHelper: RoutingHelper = () => {
  // Routing creation logic
};

RouterRoute 基本上是來自 react-router 的原生 RouteObject；增加了 { useStoryElement?: boolean }。如果你想要接受 JSX 並將其轉換為 RouterRoute，你可以使用匯出的函式 castRouterRoute。

將 story 用作路由元素

只需在路由設定物件中設定 { useStoryElement: true }。

專用面板

記錄導覽事件、載入器和動作，以便你更好地了解元件的生命週期。

相容性

需要 react-router 的 6.4+ 版本。此套件旨在支援 Storybook > 7 和 React > 16。

✅ Storybook 8.0
✅ Storybook 7.0

✅ React 18
✅ React 17
✅ React 16

如果你在使用任何版本時遇到問題，請開啟 issue。

貢獻

歡迎貢獻。

在撰寫任何程式碼之前，請提交 issue 以展示錯誤或你想要在此擴充功能中看到的功能的使用案例。

授權

此套件以 Apache 2.0 授權發布。