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

Question

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

这样，我得到的误差为

已超出最大调用堆栈大小

为什么会这样？我如何防止这样的问题？我会在侧边栏上链接10多个。

这是我所做的

索引.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>

任何人都可以指导我处理此类路线的有效方法吗？

更新

索引.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>;
  }
};

Answer 1

首先，您的所有路由都应归入路由器组件，例如，

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

其次，将routes对象传递给其他组件是没有意义的，当您可以将所有表示组件都放在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教程和工作的更多信息，请查看此链接：react培训