Javascript 为什么react router不显示所需的元素？ 从“React”导入React； 从“react Router dom”导入{BrowserRouter as Router，Route，Switch}； 导入“/App.css”； 从“./Chat”导入聊天； 从“./Sidebar”导入侧栏； 函数App（）{ 返回( 这是主屏幕 ); } 导出默认应用程序；

代码正确地显示了侧边栏。但是，当我将url更改为room/someid时，它既没有在默认主页上显示“This is home screen”，也没有在组件上显示。根据z，我甚至在路径之前添加了完全相同的内容。为什么路线不起作用？

您是否尝试过将侧边栏移到交换机外面？开关的关键是只渲染它的一个子级。非常感谢@jornsharpe解决了这个问题

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;