Meteorjs 与 ChakraUI + React 路由器的集成

Question

TLDR，在这 3 个之间集成时出现错误。但是当我将 Meteor 与 ChakraUI 一起使用时，它运行良好。但是当我添加反应路由器时，它会抛出这个错误

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

所以在 Meteor 中，我使用 ChakraUI 提供程序和浏览器路由器将应用程序包装在 client/main.jsx 中。 Chakra 需要根据 their docs.

将应用程序包装在他们的提供商基础上

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '/imports/ui/App';
import { ChakraProvider } from "@chakra-ui/react"
import { ColorModeScript } from "@chakra-ui/react"
import { BrowserRouter  } from 'react-router-dom'

Meteor.startup(() => {
  render(
  <ChakraProvider>
    <ColorModeScript initialColorMode={'dark'} />
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </ChakraProvider>,
    document.getElementById('react-target'));
});

然后在imports/ui/App.jsx我把react route switch用来渲染页面。在那之前，我在里面放了 Home.jsx 代码。

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import {Home} from './pages/Home'


export default function App() {
  return (
    <>
      <div>
        <Switch>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </>
  );
}

那么我的代码中是否有任何错误的方式来“包装”应用程序？

谢谢

Answer 1

需要检查的几件事：

在 App.jsx 中默认导出应用程序，因此您应该在 main.jsx 中导入它而不用大括号
你从 /imports/ui/App 导入 App.jsx 但你写道它位于 imports/App.jsx-> 确保导入正确，这可能是这里的问题
不确定为什么要在 App.jsx 中导入 BrowserRouter as Router，不要认为这会导致您的错误（因为它没有在您 post 的代码片段中使用）- 但是可以肯定的是，如果它已经在 main.jsx

编辑：解决问题的方法是上面的方法，主要是数字 1，加上 App.jsx 中另一个错误的同类导入（导出为默认但导入解构样式）

Meteorjs 与 ChakraUI + React 路由器的集成

Meteorjs Integration with ChakraUI + React Router

reactjs

meteor

react-router

meteor-react

chakra-ui