Storybook中Solid-js全局包裹<Router>失效问题求助

核心原因 #

你遇到的问题通常是因为Solid-js的Storybook装饰器写法和React存在差异，或者配置文件里的写法不符合Solid的JSX规范。以下是具体解决步骤：

1. 确认依赖版本 #

确保你已经安装了适配的依赖：

• @solidjs/router（Solid官方路由库）
• @storybook/solidjs（Storybook的Solid适配包，建议用最新稳定版）

2. 正确配置全局装饰器 #

在.storybook/preview.tsx（或.jsx）中，按以下方式编写全局装饰器：

import { Router } from '@solidjs/router';
import type { Preview } from '@storybook/solidjs';

const preview: Preview = {
  decorators: [
    // 用Solid的Router组件包裹所有Story
    (Story) => (
      <Router>
        <Story />
      </Router>
    ),
  ],
  // 其他Storybook配置（如title、parameters等）
};

export default preview;

3. 排查常见错误点 #

• 不要混用React Router：确保导入的是@solidjs/router的Router，而非React的react-router-dom组件，两者上下文不兼容。
• 检查装饰器顺序：如果有多个全局装饰器，确保Router处于最外层，保证所有路由相关钩子能获取到上下文。
• 验证Storybook配置：确认你的Storybook配置文件（如main.ts）已经正确设置了Solid的框架：

  import type { StorybookConfig } from '@storybook/solidjs-vite';
  
  const config: StorybookConfig = {
    framework: '@storybook/solidjs-vite',
    // 其他配置...
  };
  export default config;
  

4. 备选方案（若全局装饰器仍无效） #

如果全局配置还是不生效，可以在单个story文件中通过参数设置局部装饰器，但这只是临时方案：

import type { Meta, StoryObj } from '@storybook/solidjs';
import { Router } from '@solidjs/router';
import YourComponent from './YourComponent';

const meta: Meta<typeof YourComponent> = {
  title: 'Components/YourComponent',
  component: YourComponent,
  decorators: [
    (Story) => <Router><Story /></Router>
  ],
};

export default meta;
type Story = StoryObj<typeof YourComponent>;

export const Default: Story = {};

内容的提问来源于stack exchange，提问作者user21376473