未捕获的 RangeError：超出最大调用堆栈大小[反应路由器 v4]答案

【问题标题】：Uncaught RangeError: Maximum call stack size exceeded[react router v4]未捕获的 RangeError：超出最大调用堆栈大小[反应路由器 v4]
【发布时间】：2017-05-24 05:45:26
【问题描述】：

我在我的应用程序中使用反应路由器 v4。我正在开发一个仪表板，它具有顶部导航、侧面导航和主体的布局。侧边导航有一个链接列表，当单击这些链接时，它们会路由到它们的组件并在另一个称为主体的组件中呈现它们的组件。我已将仪表板组件分解为顶部、侧面和主要部分。在索引中，我创建了一个路由列表，并将这些路由作为道具发送到主体，以便它们可以渲染路由组件。

这样我得到一个错误

超过最大调用堆栈大小

为什么会这样？我怎样才能防止这样的问题？我将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>

谁能指导我处理此类路线的有效方法？

更新

index.js

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>;
  }
};

【问题讨论】：

我有两次使用 Route，因为根据用户的角色会有 4 个不同的仪表板。

标签： javascript reactjs redux react-router react-router-v4

【解决方案1】：

首先你的所有路由都应该在一个路由组件下，例如，

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

其次，将路由对象传递给其他组件是没有意义的，因为您可以将所有展示组件直接放在路由器组件中，在您的情况下，只需尝试以下代码：

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

有关 react-router 4 教程和工作的更多信息，请查看此链接：reacttraining

【讨论】：