如何在React项目的指定登录页面隐藏作为父组件的SideBar导航栏

你可以通过以下3种常用方案实现登录页隐藏侧边栏的需求，推荐优先使用第三种路由嵌套方案，逻辑最简洁无需额外改造组件：

方案1：路由嵌套（推荐） #

将不需要侧边栏的登录页单独作为顶层路由，其他需要侧边栏的路由统一归为一组，用SideBar包裹即可：

function App() {
    return (
        <ApolloProvider client={client}>
            <Router>
                <Switch>
                    {/* 登录页单独配置，不包裹SideBar */}
                    <Route exact path="/" component={Login} />
                    {/* 其余所有页面统一包裹SideBar */}
                    <Route path="/">
                        <SideBar>
                            <Container maxWidth="xl" disableGutters={true}>
                                <Switch>
                                    <Route exact path="/homepage" component={Homepage} />
                                    <Route exact path="/dualFinder" component={DualFinder} />
                                    <Route exact path="/dashboard" component={Dashboard} />
                                    <Route exact path="/AboutChampion" component={AboutChampion} />
                                    <Route component={Homepage} />
                                </Switch>
                            </Container>
                        </SideBar>
                    </Route>
                </Switch>
                <Footer />
            </Router>
        </ApolloProvider>
    );
}

方案2：路径判断控制SideBar属性 #

如果不想调整现有路由结构，可以通过useLocation钩子判断当前路径，给SideBar传入隐藏参数，在SideBar内部控制是否渲染侧边栏部分：

1. 改造App组件：

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

// 抽离Router内部内容，才能正常使用useLocation钩子
function AppContent() {
    const location = useLocation();
    // 判断当前是否为登录页
    const isLoginPage = location.pathname === '/';

    return (
        <>
            <SideBar hidden={isLoginPage}>
                <Container maxWidth="xl" disableGutters={true}>
                    <Switch>
                        <Route exact path="/homepage" component={Homepage} />
                        <Route exact path="/" component={Login} />                          
                        <Route exact path="/dualFinder" component={DualFinder} />
                        <Route exact path="/dashboard" component={Dashboard} />
                        <Route exact path="/AboutChampion" component={AboutChampion} />
                        <Route component={Homepage} />
                    </Switch>
                </Container>
            </SideBar>
            <Footer />
        </>
    );
}

function App() {
    return (
        <ApolloProvider client={client}>
            <Router>
                <AppContent />
            </Router>
        </ApolloProvider>
    );
}

2. 改造SideBar组件，接收hidden参数处理逻辑：

function SideBar({ children, hidden }) {
    // 登录页直接返回内容，不渲染侧边栏
    if (hidden) return <>{children}</>;
    // 非登录页正常渲染侧边栏
    return (
        <div className="sidebar-container">
            {/* 原有侧边栏的布局、菜单逻辑 */}
            {children}
        </div>
    );
}

方案3：条件渲染SideBar #

如果不想修改SideBar组件，也可以直接在App层判断路径，决定是否用SideBar包裹内容：

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

function AppContent() {
    const location = useLocation();
    const isLoginPage = location.pathname === '/';
    const pageContent = (
        <Container maxWidth="xl" disableGutters={true}>
            <Switch>
                <Route exact path="/homepage" component={Homepage} />
                <Route exact path="/" component={Login} />                          
                <Route exact path="/dualFinder" component={DualFinder} />
                <Route exact path="/dashboard" component={Dashboard} />
                <Route exact path="/AboutChampion" component={AboutChampion} />
                <Route component={Homepage} />
            </Switch>
        </Container>
    );

    return (
        <>
            {!isLoginPage ? <SideBar>{pageContent}</SideBar> : pageContent}
            <Footer />
        </>
    );
}

function App() {
    return (
        <ApolloProvider client={client}>
            <Router>
                <AppContent />
            </Router>
        </ApolloProvider>
    );
}

内容的提问来源于stack exchange，提问作者PacSmack