javascript - 控制响应式布局的侧边栏并根据 React.js 中的当前路由更新标题组件

Question

我在 React 和 RN 方面有两年的经验，但这是我第一次必须从头开始规划 Web 应用程序。

这是布局的样子：

以及 App.js 的结构。稍后我将添加 Redux 或其他商店提供程序。

function App() {
  const [isMobile, setIsMobile] = useState(false);
  const width = useWindowWidth();

  useEffect(() => {
    setIsMobile(width < theme.mobileWidthLimit);
  }, [width]);

  return (
    <ThemeProvider theme={{ isMobile, ...theme }}>
      <BrowserRouter>
        <Layout isMobile={ isMobile }>
          <Pages/>
        </Layout>
      </BrowserRouter>
    </ThemeProvider>
  );
}

我正在决定窗口是否对于桌面 UI 来说太窄，并基于此我将 isMobile 道具传递给 Styled Components 的主题提供者以及主布局。

这是我的布局：

const Layout = ({ children, isMobile }) => {
  const [sideBarOpen, setSideBarOpen] = useState(!isMobile);
  // Navigation side bar will be closed when user navigates
  const location = useLocation();
  useEffect(() => setSideBarOpen(false), [location.key]);
  // TODO improve title updation
  const title = ((path) => {
    switch (path) {
      case '/trip':
        return 'Your trips';
      case '/trip/new':
        return 'New trip';
      default:
        return 'View trip';
    }
  })(location.pathname);

  return (
    <OuterDiv>
      <MenuButton onClick={ () => setSideBarOpen(!sideBarOpen) }/>
      <NavSideBar isOpen={ sideBarOpen }/>
      <InnerDiv isClosed={ sideBarOpen }>
        <Header>
          <h1>{ title }</h1>
        </Header>
        <Content>
          { children }
        </Content>
      </InnerDiv>
      { !isMobile && <InfoSideBar/> }
    </OuterDiv>
  );
};

以下是基于 isMobile 和 sideBarOpen 的侧边栏和内容如何相互替换。

侧边栏：

display: ${(props) => props.theme.isMobile && !props.isOpen ? 'none' : 'flex'};

内部 div（包装内容和标题）：

display: ${(props) => (props.theme.isMobile && props.isClosed) ? 'none' : 'flex' };

我希望我设法让您对应用程序的外观有一个很好的总体了解。现在，困扰我的两件事是：

1. 侧边栏是否可见取决于 isMobile 和 sideBarOpen。我认为我用 isMobile 所做的是一个可靠且良好的解决方案，但我觉得 setSideBarOpen 可以简化。当用户点击汉堡菜单按钮时，我将其值更改为与其当前值相反的值，并在尝试在应用程序内导航时分配一个错误值。当用户点击侧边栏菜单中的链接时，我找不到更好的方法来关闭菜单。React Router 会检测到更改，应用程序也会检测到更改。可以改进吗？

2. 我使用 switch case 语句更新标题，根据反应路由器的当前路径推断它将是什么。必须有更好的方法来做到这一点，对吧？请注意，标头位于 react-router 的 BrowserRouter 组件之外。

标签： javascriptreactjsresponsive-designreact-routerfrontend