React-router：传递多个组件导致 Invariant Violation 错误

Question

我正在构建一个带有边栏的应用程序。最初，侧边栏是静态的（没问题），但现在我希望它使用 React Router 根据路由动态更新。

它与作为文档的一部分提供的 sidebar 示例非常相似，因此我着手将边栏示例改装到我现有的应用程序中。

这是将路由传递给单个组件的路由器代码：

import React from 'react';
import ReactRouter from "react-router";
import {Router} from 'react-router';
import {Route} from 'react-router';
import Main from "./Main"
import ItemPanel from "../views/ItemPanel"

var routes = (
  <Router>
    <Route path="/" component={Main}>
      <Route path=":category" component={ItemPanel}/>
    </Route>
  </Router>
);

这是有效的，因为它不会抛出错误；然而，为了让应用程序像示例中那样工作（特别是 line），我们需要给它一个属性 components（而不是 component），这样 Main 可以访问 this.props.itemPanel。因此，将 :category 路径替换为：

<Route path=":category" components={{itemPanel: ItemPanel}}/>

我得到一个错误：

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

显然它得到 undefined 是个问题，但我无法工作我 不认为 问题出在我的 ItemPanel 代码中，因为我已经尝试将 ItemPanel 换成 Test，其中 Test 是最基本的 React 组件。同样的问题。

如果有任何区别，这是一个同构应用程序，当尝试显示此路由时，客户端和服务器上都会发生错误。

本来我认为可能是ES5和ES6语法混合的问题，但我试过用ES6重写ItemPanel，遇到了完全相同的问题。我的应用程序的其他部分仍然使用 ES5，但如果不直接导入它们，我看不出这里会有什么问题。

提前致谢！

Answer 1

当我没有正确导入我的 ES6 依赖项时，我总是看到这个错误。我看不到导入，但您是否尝试过使用传播函数导入它，如下所示：从 './Main' 导入 { Main } 或确保您像这样导出 main：export default Main;

React-router：传递多个组件导致 Invariant Violation 错误

React-router: passing multiple components results in Invariant Violation error

javascript

reactjs

react-router