Question

我在我的应用程序中使用react router 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>;
  }
};

Answer 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

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

1 个答案: