react-router-dom 元素类型无效

Question

我是 React 和 ES6 的新手，对 react-router-dom 有点卡壳。我目前要么收到错误消息，要么 none 的信息似乎正在加载。我正在使用 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 也正确加载，因为我将此文件中的 return 更改为输出文本，它确实如此。

如前所述，我对此完全陌生，所以我希望它是相当简单的，或者只是对所有内容如何缝合在一起的误解。

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;

Vote.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;

Answer 1

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

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

react-router-dom 元素类型无效

react-router-dom Element Type Invalid

javascript

reactjs

react-router

react-router-dom