Реагировать роутер с Гэтсби - PullRequest
Новая
       31

Реагировать роутер с Гэтсби

0 голосов
/ 06 ноября 2019

В настоящее время у меня есть приложение, созданное с помощью CRA, которое использует React Router. Сейчас я пытаюсь сделать так, чтобы часть моего приложения отображалась через Gatsby, чтобы пользователи, не являющиеся техническими специалистами, могли управлять содержимым этой части приложения через CMS.

То, что у меня сейчас работает, на сервере dev, но умирает, когда я пытаюсь построить.

Это мой 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. Как обойти это без изменения моей зависимости от реакции-маршрутизатора?

Спасибо!

...