Question

我刚刚创建了一个基于Electron的React应用程序，我正在尝试实现react-router。经过大量研究和几个小时的头痛后，我无法纠正Electron Chrome控制台向我提出的错误：

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

没有react-router我能够像任何其他React应用程序一样呈现组件。这是我的代码：

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import createHashHistory from 'history/createHashHistory';

import App from './containers/App';
import Login from './containers/Login';

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={Login} />
  </Route>
);

const MOUNT_NODE = document.getElementById('app');

render(
  <Router history={createHashHistory()} routes={routes} />,
  MOUNT_NODE
);

容器/ App.js

import React, { Component, PropTypes } from 'react';

export default class AppContainer extends Component {
  constructor(props) {
    super(props);
    this.props.children = PropTypes.element.isRequired;
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

容器/ Login.js

import React, { Component } from 'react';
import Login from '../components/Login';

export default class LoginContainer extends Component {
  render() {
    return (
      <Login />
    );
  }
}

组件/ Login.js

import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    return (
      <div>
        <h1>Login Component</h1>
      </div>
    );
  }
}

有关如何删除引用错误的任何想法？提前谢谢。

Answer 1

您使用的是什么版本的React Router？您是否尝试从react-router-dom而不是react-router导入？

import { Router, Route, IndexRoute } from 'react-router-dom';

Electron - React.createElement：类型无效错误

1 个答案: