如何在 react.js 中隐藏特定页面的侧边栏？

Question

我正在使用 react 实现全局导航侧边栏（左可折叠），但我想从某些路由或组件中排除或隐藏我的侧边栏。

当我将其导入特定组件时，我会失去组件响应能力。

import React from "react";
//more imports are here

const App = () => (
  <ThemeProvider theme={theme}>
    <div>
      <AppToolbar />
      <div className="myclass">
        <SideBar>
          <Route path="/" exact component={Home} />
          <Route path="/setting" component={Setting} />
          <Route path="/help" component={Help} />
          <Route path="/about" component={About} />
        </SideBar>
      </div>
    </div>
  </ThemeProvider>
);

export default App;

寻找从Route path="/" exact component={Home} />路由隐藏侧边栏的解决方案。 或者有没有其他方法可以实现相同的功能。

Answer 1

看起来需要先从 SideBar JSX 中取出路由，这样路由就不会无限期地包裹在 SideBar 中。

将一个函数 props 传递给路由组件，它可以改变父组件侧边栏的状态。 然后在要隐藏侧边栏的路径上，调用该函数，该函数将从 DOM 中取出侧边栏 JSX。

例子：

import React from "react";
//more imports are here

const App = () => {
const [showSidebar,setShowSidebar] = React.useState();

const handleToggleSideBar = () => {
//togglesidebar with useState
setShowSidebar(!showSidebar);
}

 return (
  <ThemeProvider theme={theme}>
    <div>
      <AppToolbar />
      <div className="myclass">
        {showSidebar &&  <SideBar />}
          <Route path="/" exact render={(props) => <Home  toggleSideBar={handleToggleSideBar } {...props} />} />
          <Route path="/setting" render={//do the same thing like Home} />
      </div>
    </div>
  </ThemeProvider>
)};

export default App;

主页.jsx

    export const Home = ({toggleSideBar}) => {
    useEffect(() => {
      toggleSideBar();
      },[]);
    }