javascript - React Router，超出最大调用堆栈大小

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:超出最大调用堆栈大小

不知道为什么

Answer 1

您正在渲染已渲染路由器的应用程序。然后router渲染App，这是一个无限循环。我认为你打算做更多类似这样的事情......

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

现在，您不再渲染渲染路由器的应用程序，渲染应用程序，而是在开始时渲染路由器，然后因为您可能会测试默认路由...“/”它将渲染应用程序和任何基于您的路线的子组件。

参见:https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route