React - 一个文件应用程序 - 警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）答案

【问题标题】：React - one file app - Warning: React.createElement: type is invalid -- expected a string (for built-in components)React - 一个文件应用程序 - 警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）
【发布时间】：2018-11-09 05:48:33
【问题描述】：

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

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

和消息

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

我的文件是这样的。

索引.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')
);

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

非常感谢您的帮助

【问题讨论】：

是不是因为我没有从'react'导入React； // 从 'react-dom' 导入 ReactDOM;
尝试一次删除每个组件，看看哪个组件会导致您的错误。首先删除 <Route ... /> 行并将其替换为空 div 或其他内容
非常感谢。仅当我删除所有 BrowserRouter Route 和 Switch 元素时，错误才会停止（我一一测试...）....是否意味着我没有正确导入它们？
是的，请参阅 El Aoutar Hamza 的回答。你需要 react-router-4 才能使用 Switch 和 BrowserRouter 的 react-router-dom

标签： reactjs

【解决方案1】：

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

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

jsFiddle

【讨论】：