1

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

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

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

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>
    </>
  );
}

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

谢谢

4

1 回答 1

0

有几件事要检查：

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

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

于 2021-02-27T14:26:08.137 回答