reactjs - 使用 React Router 的 React Styleguide

Question

我正在扩展一个使用 react-styleguidist 作为网络文档的反应库（请参阅https://react-ui.geops.de/）。基本 URL 呈现组件指南。我想添加一个呈现完全不同的组件（演示页面）的路径/主题。我在许多应用程序中使用过 react-router-dom，但我认为它在 styleguidist 中的工作方式略有不同。

我尝试在 StyleGuide.js 文件中以传统方式使用它：

export function StyleGuideRenderer({
  classes,
  children,
  version,
  toc,
  hasSidebar,
}) {
  console.log(children);
  return (
    <div className={classes.root}>
      <Router>
        <Route exact path="/theme">
          <DemoPage />
        </Route>
        <Route exact path="/">
          <div>
            <header className={classes.header}>
              <div className={classes.bar}>
                <Logo>
                  <a className={classes.title} href="/">
                    {docConfig.appName}
                  </a>
                </Logo>
              </div>
            </header>
          </div>
          <div className={classes.content}>
            <div className={classes.scrollable}>
              <div className={classes.sidebar}>
                <header className={classes.version}>
                  {version && <Version>{version}</Version>}
                </header>
                {hasSidebar ? toc : null}
              </div>
              <main className={classes.main}>{children}</main>
            </div>
          </div>
        </Route>
      </Router>
    </div>
  );
}

这会导致 GET 错误：Cannot GET /theme. 我猜它会查找theme.html，然后在找不到任何内容时抛出错误。

有人对在 StyleGuide 服务器中使用 react-router-dom 有任何提示吗？

感谢您的任何提示

标签： reactjsreact-router-domreact-styleguidist