react-router-dom 元素类型无效答案

【问题标题】：react-router-dom Element Type Invalidreact-router-dom 元素类型无效
【发布时间】：2017-11-14 12:59:28
【问题描述】：

我是 React 和 ES6 的新手，对react-router-dom 有点卡住。我目前要么收到错误消息，要么似乎没有加载任何信息。我使用的是 React 15.6。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './components/App';
import Vote from './components/Vote';
import Results from './components/Results';

ReactDOM.render(
  <Router>
    <App>
      <Route path="/" component={Vote} />
      <Route path="/results" component={Results} />
    </App>
  </Router>,
  document.getElementById('root')
);

如果我在 index.js 中有两个 Route 声明，则会出现错误

Element type is invalid: expected a string (for built-in components) or a 
class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in.

我认为这意味着this.props.children 没有值，因此无法正确克隆具有配对列表的路由？

如果我删除了Route 声明之一，该页面会成功编译，但它只是空的。我在 Vote.jsx 的 return() 中添加了一行文本，它确实输出了，所以路由正常工作，this.getPair() 函数没有输出任何内容。

看起来 App.jsx 也正确加载了，因为我将此文件中的返回更改为输出文本，它确实如此。

如前所述，我对此完全不满意，所以我希望它是相当简单的，或者只是对所有东西如何拼接在一起的误解。

App.jsx

import React from 'react';
import {List, Map} from 'immutable';

const pair = List.of('Item One', 'Item Two');
const tally = Map({'Item One': 5, 'Item Two': 4});

export class App extends React.PureComponent {
  render() {
    return (
      React.cloneElement(this.props.children, {pair: pair})
    )
  }
};

export default App;

投票.jsx

import React from 'react';

export class Vote extends React.PureComponent {

  getPair() {
    return this.props.pair || [];
  }

  isDisabled() {
    return !!this.props.hasVoted;
  }

  hasVotedFor(entry) {
    return this.props.hasVoted === entry;
  }

  render() {
    return (
      <div className="voting">
        {this.getPair().map(entry =>
          <button key={entry} onClick={() => this.props.vote(entry)} disabled={this.isDisabled()}>
            <h1>{entry}</h1>
            {this.hasVotedFor(entry) ? <div className="label">Voted</div> : null}
          </button>
        )}
      </div>
    )
  }
};

export default Vote;

Results.jsx

import React from 'react';

export class Results extends React.PureComponent {

  getPair() {
    return this.props.pair || [];

  }

  getVotes(entry) {
    if (this.props.tally && this.props.tally.has(entry)) {
      return this.props.tally.get(entry);
    }

    return 0;
  }

  render() {
   return (
      <div className="results">
        {this.getPair().map(entry =>
          <div key={entry} className="entry">
            <h1>{entry}</h1>
            <div className="voteCount">
              {this.getVotes(entry)}
            </div>
          </div>
        )}
      </div>
    )
  }
};

export default Results;

【问题讨论】：

你在使用 React 16 吗？
第一个 <Route/> 的 component 道具中的简单错误。将Vote 更改为Voting，反之亦然，以匹配您的导入语句。
下一步可能是尝试将路由嵌套在 <Switch/> 语句中，因为给 <App/> 组件一个孩子似乎可以工作。
另外，getPair() 未绑定到 this。您可能想尝试使用箭头函数调用它或将其绑定到组件的 constructor() 方法中。
您也可以直接传递props 来路由组件，如下所示：<Route path="/" component={() => <Vote pair={pair}/>} />。为了传递数据，从 <App/> 组件文件内部声明路由可能会更干净。

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

Arman Charan 关于使用 <Switch /> 语句的评论是我让路线正常工作并停止接收上述错误的方式。

ReactDOM.render(
    <Router>
      <App>
        <Switch>
          <Route path="/" component={Vote} />
          <Route path="/results" component={Results} />
        </Switch>
    </Router>,
  document.getElementById('root')
);

【讨论】：