Question

我正在尝试创建一个单独的文件应用程序，没有从其他文件导入，也没有webpack，但我无法使其工作，因为我收到消息

'警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。'

和消息

未捕获错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。

我的文件看起来像这样。

INDEX.HTML

在头部我有以下链接

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<script src="https://unpkg.com/react-router@3.0.0/umd/ReactRouter.js"></script>

在正文中我有id =“root”的div和脚本标记，类型为“text / label”，然后在脚本标记中包含以下代码：

let BrowserRouter = ReactRouter.BrowserRouter;
  let Route = ReactRouter.Route;
  let Switch = ReactRouter.Switch;

  class FriendsIndexRoute extends React.Component {
    render() {
      return (
        <div>
           some content
        </div>
      );
    }
  }

ReactDOM.render(
    <BrowserRouter>
      <main>
        <Switch>
          <Route path="/" component={FriendsIndexRoute} />
        </Switch>
      </main>
    </BrowserRouter>,
  document.getElementById('root')
);

知道是什么导致了这个问题吗？

非常感谢你的帮助

Answer 1

BrowserRouter是react-router-dom的一部分，因此您需要将其添加到脚本中。

Switch位于React路由器V4中，因此您需要从V3升级到V4。

jsFiddle

React - 一个文件应用程序 - 警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）

1 个答案: