javascript - react-router-dom 元素类型无效

Question

我是 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')
);

如果我有两个Route index.js 中的声明，我收到错误

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 之一声明，页面确实成功编译，但它只是空的。我在return()中添加了一行文本在 Vote.jsx 中，它确实输出了该内容，因此路由工作正常，只是没有为 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;

结果.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;

Answer 1

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

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