反应 mui appbar 在某些页面上丢失

Question

我正在尝试使用 React 和 react-router-dom:5.2.0 作为

的简单布局

Header

主页（映射到路径“/”）
Auth（映射到路径“/auth”）
第 1 页（映射到路径 'path1/page1'）

页脚

header 也在 HomePage('/') 和 Auth('/auth') 中呈现。但是在 Page1('path1/page1') 上，只有 Page1 组件被渲染而没有 Header。页脚仍然呈现。

源代码是

function App() {
    return (
        <BrowserRouter>
            <StylesProvider generateClassName={generateClassName}>
                <div>
                    <Header />
                    <Suspense fallback={<Progress />}>
                        <Switch>
                            <Route path="/" exact component={Homepage} />
                            <Route path="/auth" render={props => (<Authpage {...props} /> )} />
                            <Route path="/path1/page1" render={(props) => (<Page1 {...props}/>)} />
                        </Switch>
                    </Suspense>
                    <Footer />
                </div>
            </StylesProvider>
        </BrowserRouter>
    );
}

export default App;

header 组件正在与应用栏一起使用

const Header = () => {
    return (
        <div>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6">
                        <Link to="/"><img src={"/assets/logo.png"} alt="Logo" className={classes.logo} /></Link>
                    </Typography>
                    <ShowAuth />
                    <ShowPage1 />
                </Toolbar>
            </AppBar>
        </div>
    );
};

export default Header;

请告诉我。我看到一个类似的问和下面，我在路由器外面有 Header 。不确定出了什么问题。

Answer 1

我在 react mfe 中遇到了这个问题，其中 header，页脚都是远程应用程序。由于某些原因，某些页面上缺少 header。将 header 作为 shell（或主容器）的一部分，使其按预期工作。目前，header 位于 shell 本身之下。

反应 mui appbar 在某些页面上丢失

react mui appbar missing on some page

appbar

reactjs

react-router

material-ui

Header

页脚