Meteorjs 与 ChakraUI + React 路由器的集成

Question

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

警告：React.createElement：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

所以在 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

需要检查的几件事：

1. 在 App.jsx 中您将 App 导出为默认值，因此您应该在 main.jsx 中将其导入而不使用花括号
2. 你从 /imports/ui/App 导入 App.jsx 但你写它位于 imports/App.jsx-> 确保导入正确，这可能是这里的问题
3. 不确定为什么要在 App.jsx 中导入 BrowserRouter as Router，不要认为这会导致您的错误（因为它没有在您发布的代码 sn-p 中使用） - 但可以肯定的是，它不应该如果它已经在 main.jsx 中，则不能在 App.jsx 中的其他任何地方使用

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