Uncaught RangeError：最大呼び出しスタックサイズを超えました[react router v4]

Question

私のアプリケーションでreact router v4を使用しています。私はトップナビゲーション、サイドナビゲーション、本体のレイアウトを持つダッシュボードを開発しています。サイドナビゲーションにはリンクをクリックすると、そのコンポーネントへのルートがクリックされ、そのコンポーネントがメインボディと呼ばれる別のコンポーネントにレンダリングされます。ダッシュボードコンポーネントをトップ、サイド、メインに分割しました。インデックスでは、私はルートのリストを作成し、それらのルートを、彼らが私がルーティングされたコンポーネントをレンダリングできるように、本体に小道具として送ります。

私は

Maximum call stack size exceeded

なぜようであるのエラーが出る。この方法はありますか？どうすればそのような問題を防ぐことができますか？サイドバーには10以上のリンクがあります。ここで

は、私は誰もが私にそのような経路を処理するための効率的な方法を導くことができる

index.js

const routes = [ 
    { 
    path: '/', 
    exact: true, 
    main:() => <Dashboard /> 
    }, 
    { 
    path: '/dashboard', 
    main:() => <h2>dashboard</h2> 
    }, 
    { 
    path: '/email_template', 
    main:() => <AdminEditor /> 
    } 
]; 

class Dashboard extends React.PureComponent { 
    render() { 
    return (
     <div> 
     <nav 
      className="navbar navbar-default navbar-static-top" 
      role="navigation" 
      style={{ marginBottom: 0 }}> 
      <TopNavigation user={this.props.user} /> 
      <SideNavigation /> 
     </nav> 
     <BodyWrapper routes={routes} /> 
     </div> 
    ); 
    } 
} 


SideNavigation.js 

<ul className="nav" id="side-menu"> 
    <li> 
    <Link to="/"> 
     <i className="fa fa-dashboard fa-fw" /> Dashboard 
    </Link> 
    </li> 
    <li> 
    <Link to="/email_template"> 
     <i className="fa fa-dashboard fa-fw" /> Email Template 
    </Link> 
    </li> 
</ul> 

BodyWrapper.js 

<div className="col-lg-12"> 
    <h1 className="page-header"> 
    {routes.map((route, index) => (
     <Route 
     key={index} 
     path={route.path} 
     exact={route.exact} 
     component={route.main} 
     /> 
    ))} 
    </h1> 
</div> 

をやっているのですか？

ReactDOM.render(
    <Provider store={store}> 
    <Router> 
     <App /> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

app.jsが

class App extends React.Component { 
    render() { 
    if (this.props.auth.isAuthenticated) { 
     return <Entity user={this.props.auth.user} />; 
    } else { 
     return (
     <div> 
      <Links /> 
      <Switch> 
      <Route path="/login" component={LoginPage} /> 
      <Route path="/register" component={RegisterPage} /> 
      <Route path="/home" component={HomePage} /> 
      <Route 
       strict 
       path="/about" 
       render={() => <div>About us Page</div>} 
      /> 
      </Switch> 
     </div> 
    ); 
    } 
    } 
} 

const userTypes = [ 
    { id: '4', val: Dashboard }, // Previous Above code is for this entity 
    { id: '3', val: Dashboard3 }, 
    { id: '2', val: Dashboard2 }, 
    { id: '1', val: Dashboard1 } 
]; 

const entity = props => { 
    const redirectRoute = userTypes.filter(x => x.id === props.user.id); 
    if (redirectRoute && redirectRoute.length) { 
    const ComponentToRender = redirectRoute[0].val; 
    return <ComponentToRender {...props} />; 
    } else { 
    return <div>can't get route. unknown issue.</div>; 
    } 
}; 

Answer 1

まず、すべてのルートが、そのような

<Router> 
    <Route exact path="/" component={Home}/> 
    <Route path="/about" component={About}/> 
    <Route path="/topics" component={Topics}/> 
</Router> 

、として、ルータコンポーネントの下に来るべき

UPDATE

index.js第二にそれはmaではない反応し、ルータの詳細については

class Dashboard extends React.PureComponent { 
    render() { 
    return (
    <Router> 
     <div> 
     <nav 
      className="navbar navbar-default navbar-static-top" 
      role="navigation" 
      style={{ marginBottom: 0 }}> 
      <TopNavigation user={this.props.user} /> 
      <SideNavigation /> 
     </nav> 
     <Route exact path="/" component={Dashboard}/> 
     <Route path="/dashboard" component={<h2>dashboard</h2>}/> 
     <Route path="/email_template" component={<AdminEditor />}/> 
     </div> 
    </Router> 
    ); 
    } 
} 

：ルートに合格するKE感がちょうどこのコードを試してみて、あなたの場合には、右のルータコンポーネント内のすべてのあなたのプレゼンテーションコンポーネントを置くことができ、すべてのいくつかの他のコンポーネント、に反対します4チュートリアルと作業リンクを確認してください：reacttraining