React: TypeError: Eigenschaften von null (Lesen von 'useContext') können nicht gelesen werden, wenn versucht wird, den React-Bootstrap-Container zu verwenden

Wie im Titel angegeben, versuche ich, eine Layoutkomponente zu erstellen, aber die Verwendung von React-Bootstrap-Komponenten scheint mir Fehler zu geben. In diesem Fall bekomme ich den Fehler:

TypeError: Eigenschaften von null können nicht gelesen werden (Lesen von 'useContext')

Der Code für diese Layout-Komponente ist unten:

import React from 'react';
import { Container } from 'react-bootstrap';
export const Layout = (props) => (
 <Container>
 {props.children}
 </Container>
 )

Und dies wird von App.js unten aufgerufen:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import './custom.css'
class App extends Component {
 render () {
 return (
 <Layout>
 <Switch>
 <Router>
  <Route exact path='/' component={Home} />
 </Router>
 </Switch>
 </Layout>
 );
 }
}
export default App;

Das Ersetzen der Container-Tags durch div wird wie erwartet gerendert, aber jede Verwendung von „react-bootstrap" verursacht den useContext-Fehler.

Lösung des Problems

Router muss über Switch sein:

<Router>
 <Layout>
 <Switch>
 <Route path="/" component={Home} />
 </Switch>
 </Layout>
</Router>

https://codesandbox.io/s/determined-zeh-r3vvl4