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

如果我在 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;

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元素类型无效

1 个答案: