Reactjs react路由器dom多布局配置不'；t显示由路线指示的部件

我正在尝试为在React中创建的网页进行多布局配置。我已经测试了许多在线找到的解决方案，但我无法让它们在我的案例中发挥作用

我认为路由部分基本上是正确的，问题出在Home.js中，但我不知道它是什么

我的React代码如下：

App.js

从“React”导入React；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./主页”导入主页；
从“./About”导入{About}；
从“/Contact”导入{Contact}；
从“/NoMatch”导入{NoMatch}；
从“./components/NavigationBar”导入{NavigationBar}；
从“./layouts/mainloayout”导入{mainloayout}；
常量应用=（）=>{
返回(
)
};
常量批准=（{component:component，layout:layout，…rest}）=>(
(
)} />
)
导出默认应用程序；

呈现/返回的唯一内容（我无法真正理解两者之间的区别——这就是为什么我在标题中称其为“显示”）是

我试图显示的测试页面是Home.js

Home.js

import React，{Component}来自'React'；
从“./components/Post”导入{Post}；
从“./components/Carousel”导入{CarouselShow}；
类Home扩展组件{
render（）{
返回(
)
}
}
导出默认主页；

由于我读过一些在线教程，我已经回到了课堂上。我真的很感激——除了解决方案之外——有人能告诉我类、常量和函数之间的区别

多谢各位

---

编辑：我忘了-其他路线不显示任何内容以及Home.js。

Switch

应该只包含

路线

组件，将

导航栏

组件移出

开关

<Router>
   <NavigationBar />
   <Switch>
      <AppRoute exact path="/" component={Home} layout={MainLayout} />
      <AppRoute path="/about" component={About} layout={MainLayout} />
      <AppRoute path="/contact" component={Contact} layout={MainLayout} />
      <AppRoute component={NoMatch} layout={MainLayout} />
   </Switch>
</Router>

你的意思是这样的吗？它真的起作用了！谢谢你。我花了很多时间试图解决这个问题，我觉得自己很愚蠢：|

import React, { Component } from 'react';

import { Post } from './components/Post';
import { CarouselShow } from './components/Carousel';

class Home extends Component{
    render(){
        return(
            <React.Fragment>
                <CarouselShow />
                <Post />
            </React.Fragment> 
        )
    }
}

export default Home;

<Router>
   <NavigationBar />
   <Switch>
      <AppRoute exact path="/" component={Home} layout={MainLayout} />
      <AppRoute path="/about" component={About} layout={MainLayout} />
      <AppRoute path="/contact" component={Contact} layout={MainLayout} />
      <AppRoute component={NoMatch} layout={MainLayout} />
   </Switch>
</Router>