Question

尝试设置反应路由时遇到一些奇怪的错误

这是我的主要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 exceeded

不明白为什么

Answer 1

您正在渲染您已渲染路由器的应用程序。然后路由器呈现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'));

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

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

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

1 个答案: