Question

我试图将布局传递给我的私有路由组件，但我不能，该布局不会呈现，并且如果我直接使用该布局，它将影响所有路由，不仅影响其子节点。

我有这段代码，它将布局应用于所有路线：

    return (
      <Router>
          <OnlyGuest path="/signin" component={SignIn}/>

          <DefaultLayout>
              <PrivateRoute exact path="/" component={Dashboard} />
              <PrivateRoute path="/active-operations" component={ Active } />
              <PrivateRoute path="/pending-operations" component={ Pending } />
              <PrivateRoute path="/approved-operations" component={ Approved } />
              <PrivateRoute path="/to-check-operations" component={ ToCheck } />
              <PrivateRoute path="/rejected-operations" component={ Rejected } />
              <PrivateRoute path="/create-operation" component={OperationCreate} />
          </DefaultLayout>
      </Router>
  );

当我这样做时，很多教程都说对我不起作用，布局不呈现：

return (
      <Router>
          <OnlyGuest path="/signin" component={SignIn}/>

          <Route component={DefaultLayout}>
              <PrivateRoute exact path="/" component={Dashboard} />
              <PrivateRoute path="/active-operations" component={ Active } />
              <PrivateRoute path="/pending-operations" component={ Pending } />
              <PrivateRoute path="/approved-operations" component={ Approved } />
              <PrivateRoute path="/to-check-operations" component={ ToCheck } />
              <PrivateRoute path="/rejected-operations" component={ Rejected } />
              <PrivateRoute path="/create-operation" component={OperationCreate} />
          </Route>
      </Router>
  );

我的PrivateRoute组件具有以下代码：

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props) => (
        checkAuth() === true
            ? <Component {...props} />
            : <Redirect to='/signin' />
    )} />
);

我添加了默认布局，它检索了子组件以渲染路线：

export default function DefaultLayout(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
                <Container maxWidth="lg" className={classes.container}>
                    { props.children }
                </Container>
        </div>
    );
}

我想如何在路由中为DefaultLayout工作？

在这里您可以找到我的实际代码以及工作方式。

https://stackblitz.com/edit/react-diicmg

您可以将isAuth变量更改为true或false以查看问题。 DefaultLayout总是在屏幕上：c

Answer 1

（在StackBlitz中）实现的问题在于，正在渲染多个路由，这就是为什么即使仅用DefaultLayout包装选择的路由，也看到DefaultLayout被渲染的原因。您可以使用Switch组件仅呈现一条或一组路线。如果没有Switch，则像/这样的路由可以呈现多个路由，如链接文档中所述：

<Router>
  <Switch>
    <OnlyGuest path="/signin" component={SignIn} />
    <DefaultLayout>
      <PrivateRoute exact path="/" component={Dashboard} />
    </DefaultLayout>
  </Switch>
</Router>

这里是工作中的example。切换auth的值可查看SignIn渲染时没有DefaultLayout。

希望有帮助！

在私人路线上使用布局做出反应

1 个答案: