如何解决Storybook中react-router-dom Redirect组件不生效的问题？

• 修正全局路由装饰器配置
  大部分Redirect不生效的原因是仅用MemoryRouter包裹了故事实例，没有给Redirect指向的目标路由配置匹配规则，你可以直接在.storybook/preview.js中配置全局通用的路由装饰器，示例如下：

import { MemoryRouter, Routes, Route } from 'react-router-dom';

export const decorators = [
  (Story) => (
    <MemoryRouter>
      <Routes>
        {/* 依次添加你业务中所有需要跳转的目标路由，用简单的模拟节点渲染即可 */}
        <Route path="/login" element={<div>登录页（模拟）</div>} />
        <Route path="/landing" element={<div>首页（模拟）</div>} />
        {/* 兜底路由渲染当前故事组件 */}
        <Route path="*" element={<Story />} />
      </Routes>
    </MemoryRouter>
  ),
];

如果使用的是react-router-dom v5版本，将上面代码中的Routes替换为Switch、element属性替换为component属性即可。

• 单故事自定义路由参数
  如果需要测试特定路径下的Redirect逻辑，可以直接在单个故事的配置中覆盖路由初始参数，示例如下：

// Landing.stories.jsx
export const AuthExpiredRedirect = {
  parameters: {
    reactRouter: {
      // 自定义当前故事的初始访问路径
      initialEntries: ['/landing?expired=1'],
    },
  },
};

• 调整废弃API适配
  如果使用的是react-router-dom v6版本，官方已经废弃了Redirect组件，需要替换为*<Navigate to="目标路径" replace />*语法，旧的Redirect组件在v6环境下本身无法正常工作。

• 弃用addon-links处理路由跳转
  @storybook/addon-links是用来处理Storybook内部不同故事之间跳转的工具，和react-router的路由体系不互通，不需要用它来处理业务代码中的Redirect逻辑。

内容的提问来源于stack exchange，提问作者Javier Guzmán