Material-UI：与 react-router-dom 一起使用时，如何在某些路由中移除抽屉？

Question

我将所有路线作为 Material UI Drawer的子项并用作道具。 由于登录页面不能有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;

Answer 1

您可以创建 MUI 的Drawer的包装器，该包装器根据当前路由有条件地呈现Drawer 。 例如：

import { useLocation } from "react-router-dom";

function isAuthRoute(pathname: string) {
  return pathname === "/" || pathname === "/register";
}

function MyDrawer() {
  const location = useLocation();

  if (isAuthRoute(location.pathname)) {
    return null;
  }

  return (
    <Drawer>
      {...}
    </Drawer>
  );
}

然后在每个页面中包含MyDrawer 。 您可以创建一个Layout组件来简化该过程：

function Layout({ children }) {
  return (
    <>
      {children}
      <MyDrawer />
    </>
  )
}

function LoginPage() {
  return (
    <Layout>
      <LoginContent />
    </Layout>
  )
}

function ListingPage() {
  return (
    <Layout>
      <ListingContent />
    </Layout>
  )
}

最后在你的 App 中，将Route声明为正常，里面的Drawer就会知道何时正确渲染。

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={LoginPage} />
        <Route path="/kids" component={ListingPage} />
        <Route path="/register" component={RegisterPage} />
      </Switch>
    </BrowserRouter>
  );
}