时间戳

首页 > 解决方案 > 用 Gatsby 反应路由器

reactjs - 用 Gatsby 反应路由器

问题描述

我目前有一个使用 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
  1. 为什么只有在我构建网站的生产版本时才会发生这种情况？
  2. 为什么会发生这种情况，因为我已经定义了客户端路由并且这里的代码应该只在客户端呈现？
  3. 在不改变我对 react-router 依赖的情况下解决这个问题的方法是什么？

谢谢！

标签： reactjsreact-routergatsbyreact-router-dom

解决方案

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

推荐阅读