用 Gatsby 反应路由器答案

【问题标题】：React router with Gatsby用 Gatsby 反应路由器
【发布时间】：2020-03-02 07:34:15
【问题描述】：

我目前有一个使用 CRA 构建的应用程序，它使用 React Router。我现在正在尝试通过 Gatsby 呈现我的应用程序的一部分，以便非技术用户可以通过 CMS 控制应用程序这部分的内容。

我目前在开发服务器中工作，但在我尝试构建时死掉了。

这是我的gatsby-node

exports.onCreatePage = async ({ actions, page }) => {
  const { createPage } = actions;

  return new Promise((resolve, reject) => {
    if (page.path === "/") {
      createPage({
        ...page,
        matchPath: "/*"
      });
    }
    resolve();
  });
};

我有一个在pages/study/index.js 呈现的静态页面。它很大，所以假设它看起来像这样

export default function Home({ data }) {
  if (!data) return null;

  const { mdx } = data;
  const { frontmatter: cmsData } = mdx;

  return (
    <StaticRouter location="/study">
      <Provider>
        <HomeTemplateWithRouter cmsData={cmsData} data={data} />
      </Provider>
    </StaticRouter>
  );
}

我还有一个index.js，看起来像这样

import React from "react";
import { Provider } from "components/general/Provider";
import { BrowserRouter } from "react-router-dom";
import AppContainer from "containers/AppContainer";
import { StaticRouter } from "react-router";

const Application = () => {
  return (
    <BrowserRouter>
      <Provider>
        <AppContainer />
      </Provider>
    </BrowserRouter>
  );
};

export default Application;

当我使用开发服务器时一切正常。但是，当我构建时出现此错误

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


   7 | 
   8 |   if (isProduction) {
>  9 |     throw new Error(prefix);
     | ^
  10 |   } else {
  11 |     throw new Error(prefix + ": " + (message || ''));
  12 |   }


  WebpackError: Invariant failed

  - tiny-invariant.esm.js:9 invariant
    node_modules/tiny-invariant/dist/tiny-invariant.esm.js:9:1

  - history.js:250 createBrowserHistory
    node_modules/history/esm/history.js:250:115

  - BrowserRouter.js:29 new BrowserRouter
    node_modules/react-router-dom/es/BrowserRouter.js:29:176

为什么只有在我构建网站的生产版本时才会出现这种情况？
既然我已经定义了客户端路由并且这里的代码应该只在客户端呈现，为什么会发生这种情况？
在不改变我对 react-router 依赖的情况下，有什么方法可以解决这个问题？

谢谢！

【问题讨论】：

标签： reactjs react-router gatsby react-router-dom

【解决方案1】：

我也有同样的问题。我在网上搜索，发现只有一个解决方案是避免react-router-dom。

【讨论】：