为什么反应路由器未显示所需的元素？

Question

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

function App() {
  return (
    <div className="app">
      <div className="app__body">
        <Router>
          <Switch>
            <Sidebar/>
            <Route exact path="/">
              <h1>This is home screen</h1>
            </Route>
            <Route path="/rooms/:roomId">
              <Chat/>
            </Route>
          </Switch>
        </Router>
      </div>
    </div>
  );
}

export default App;

代码正确显示了侧边栏。但是当我将URL更改为room / someid时，它既未显示默认主页上的'This is home screen'，也不显示组件。.根据this answer我甚至添加了精确在路径之前。为什么路线不起作用？