Storybook 擴充套件 Remix React Router

在您的 stories 中使用 Remix React Router。

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

近期變更

✅ 使用 storybook-addon-remix-react-router@3 支援 Storybook 8。
✅ 您現在可以使用 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

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

貢獻

歡迎貢獻。

在撰寫任何程式碼之前，請提交問題，以展示您希望在此擴充套件中看到的錯誤或功能的使用案例。

授權

此套件在 Apache 2.0 授權下發行。