react-router-dom多个布局配置不显示路线

Question

我正在尝试为我在React中创建的网页进行多布局配置。我已经测试了许多在网上找到的解决方案，但是我无法使其在我的情况下起作用。

我认为路由部分大部分是正确的，问题出在Home.js中，但我不知道这是什么。

我的React代码如下：

App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import Home from './Home';
import { About } from './About';
import { Contact } from './Contact';
import { NoMatch } from './NoMatch';
import { NavigationBar } from './components/NavigationBar';
import { MainLayout } from './layouts/MainLayout';

const App = () => {
  return (
    <React.Fragment>
      <Router>
        <Switch>
          <NavigationBar />
          <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>
    </React.Fragment>
  )
};

const AppRoute = ({component: Component, layout: Layout, ...rest}) => (
    <Route {...rest} render={props => (
      <Layout>
        <Component {...props} />
      </Layout>
    )} />
)

export default App;

唯一呈现/返回的内容（我不能真正理解两者之间的区别-这就是为什么我称其为“显示”标题）的原因。

我要显示的用于测试的页面是Home.js

Home.js

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;

我已将Home纳入课堂，以我已阅读的一些在线教程为例。我真的很感激-除了解决方案之外-有人可以告诉我类，常量和函数之间的区别。

谢谢。

编辑：我忘了-其他路线没有显示任何内容，就像Home.js一样。

Answer 1

Switch仅应包含Route个组件，将NavigationBar个组件移出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>