在某些页面上缺少反应 mui appbar答案

【问题标题】：react mui appbar missing on some page在某些页面上缺少反应 mui appbar
【发布时间】：2021-05-29 20:08:37
【问题描述】：

我正在尝试使用 react 和 react-router-dom:5.2.0 作为简单布局

标题

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

页脚

标题也在 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;

标题组件与应用栏一起使用

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;

请告诉我。我看到一个类似的question 被问到并关注，我确实在路由器外有标头。不知道出了什么问题。

【问题讨论】：

标签： reactjs react-router material-ui appbar

【解决方案1】：

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

【讨论】：