React 路由器，已超出最大呼叫堆栈大小

Question

尝试设置react路由时出现一些奇怪的错误

这是我的主index.js文件

class App extends React.Component{

  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render(){
    return (
       <Router history={hashHistory}>
        <Route path={'/'} component={App}>
          <Route path={'/quizzes'} component={Quiz}> </Route>
        </Route>
       </Router>
      )
  };
};

ReactDOM.render(<App />,
    document.getElementById('content'));

我得到的错误是Uncaught RangeError:Maximum call stack size exceed

不知道为什么

Answer 1

你正在渲染你的应用程序，你有渲染路由器。然后路由器渲染应用程序，这是一个无限循环。我想你的意思是做更像这样的事情……

js lang-js prettyprint-override">class App extends React.Component{

  constructor(props) {
    super(props);
    this.state = {

    };
  }

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

ReactDOM.render(
       <Router history={hashHistory}>
        <Route path={'/'} component={App}>
          <Route path={'/quizzes'} component={Quiz}> </Route>
        </Route>
       </Router>,
    document.getElementById('content'));