时间戳

首页 > 解决方案 > 在私人路线上使用布局反应

reactjs - 在私人路线上使用布局反应

问题描述

我试图将布局传递给我的私有路由组件，但我不能，布局没有渲染，如果我直接使用布局，它会影响所有路由，而不仅仅是他们的子路由。

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

    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

标签： reactjslayoutreact-router

解决方案

您的实现（在 StackBlitz 中）的问题是正在渲染多个路由，这就是为什么DefaultLayout即使您只使用DefaultLayout. 您可以使用Switch组件仅渲染单个或一组路由。如果没有Switch，类似的路由/可以呈现多个路由，如链接文档中更详细描述的那样：

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

这是一个工作示例。切换 auth 的值以查看SignIn没有DefaultLayout.

希望这会有所帮助！

推荐阅读