Reactjs 物料界面：在使用react路由器dom时，如何移除某些路径中的抽屉？

我将所有路线作为物料UI

Drawer

的子项，并用作道具。由于登录页面不能有

抽屉

，如何构造登录路径，使其不包含抽屉

我现在尝试的是把一切结合在一起

function App(props) {
  const { history } = props;
  return (
    <BrowserRouter>
      <Route path="/" exact component={Login} />
      <Drawer history={history}>
        <Switch>
          <Route path="/kids" component={Listing} />
          <Route path="/register" component={Register} />
        </Switch>
      </Drawer>
    </BrowserRouter>
  );
}

export default App;

功能应用程序（道具）{
const{history}=props；
返回(
);
}
导出默认应用程序；

您可以创建MUI的

抽屉

的包装器，该包装器根据当前路由有条件地呈现

抽屉

。例如：

从“react router dom”导入{useLocation}；
函数isAuthRoute（路径名：字符串）{
返回路径名===“/”| |路径名===“/寄存器”；
}
函数MyDrawer（）{
const location=useLocation（）；
if（isAuthRoute（location.pathname））{
返回null；
}
返回(
{...}
);
}

然后在每页中包括

MyDrawer

。您可以创建

布局

组件以简化该过程：

函数布局（{children}）{
返回(
{儿童}
)
}
函数LoginPage（）{
返回(
)
}
函数ListingPage（）{
返回(
)
}

最后，在你的应用程序中，将

路径

s声明为正常，里面的

抽屉

将知道何时正确渲染

导出默认函数App（）{
返回(
);
}