React Router 問題：React 在同一頁面中渲染兩個組件

Question

我的項目有問題，實際上，當用戶在我的應用程序的路由之外輸入不同的 url 時，我正在嘗試處理 404 頁面，但是使用我對 React 和 react-router 的了解只需要放置最后一條路由沒有路徑和確切路徑由 react-router 的Switch包裝，但效果不佳，主頁同時呈現Home和NotFound組件。

我試圖刪除路由器內的 Container 組件，但這使得 MenuBar 之后的所有組件都消失了。

我試圖將 path='*' 放在最后一個 Route 中，在同一頁面中呈現 2 個組件。

我在說什么的圖片：同時有 2 個組件

我的項目有 3 個主要文件：

1.- 索引.js：

import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import ApolloProvider from './ApolloProvider';

import 'semantic-ui-css/semantic.min.css';
import 'animate.css/animate.min.css';
import './App.css';

ReactDOM.render(ApolloProvider, document.getElementById('root'));

serviceWorker.unregister();

2.- ApolloProvider.js（使用 Apollo 和 GraphQL）：

import React from 'react';
import App from './App';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import { ApolloProvider } from '@apollo/react-hooks';

const httpLink = createHttpLink({
    uri: 'http://localhost:5000/graphql'
});

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
});

export default (
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>
);

3.- 最后是 App.js：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Container } from 'semantic-ui-react';

import MenuBar from './Components/MenuBar';
import Home from './Pages/Home';
import Login from './Pages/Login';
import Register from './Pages/Register';
import NotFound from './Pages/404';

const App = props => (
    <Router>
        <Switch>
            <Container>
                <MenuBar />
                <Route exact path='/' component={Home} />
                <Route exact path='/login' component={Login} />
                <Route exact path='/register' component={Register} />
                <Route path='*' component={NotFound} />
            </Container>
        </Switch>
    </Router>
);

export default App;

我只需要在用戶訪問“/”時渲染 Home 組件，但奇怪的是 react-router 如何同時渲染兩個組件，如果您發現我的錯誤或解決方案，請告訴我，我將發布如果我找到解決方案或其他什么，則更新。

先謝謝各位大佬了。。

Answer 1

感謝@skyboyer 和@Hugo Dozois，問題得到了解決，這是更新后的App.js以供將來參考：

const App = props => (
    <Router>
        <Container>
            <MenuBar />
            <Switch>
                <Route exact path='/' component={Home} />
                <Route exact path='/login' component={Login} />
                <Route exact path='/register' component={Register} />
                <Route path='*' component={NotFound} />
            </Switch>
        </Container>
    </Router>
);

此致！