我正在尝试使用 React 和 Firebase 制作 WhatsApp Web 克隆。在这里，我想实现这样的功能：单击窗口左侧侧栏中的特定聊天会在右侧打开聊天正文。 为此，我在 React 中使用 Switch 和 Route。默认情况下，我希望在所有情况下都显示侧栏，但仅在用户单击其中一个聊天时显示聊天正文。 为此，我的 App.js 中的代码是：

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

function App() {
  return (
    <div className="app">
      <div className="app_body">
        <BrowserRouter>
          <Switch>
            <Sidebar />

            <Route exact path="/" component={Chat} />

            <Route path="/rooms/:roomId" component={Chat} />
            </Switch>
        </BrowserRouter>
      </div>
    </div>
  );
}

export default App;

但是，每次都只显示侧边栏。即使我在确切的主路由（“/”）中添加了 Chat 组件，也不会显示聊天 如下所示

当我在代码中交换 Chat 和 Sidebar 组件时，只有 Chat 组件会显示 像这样

此代码有什么问题？我尝试搜索很多答案，但找不到任何答案。我尝试切换路线、组件和一切

我的具体组件的代码是：

聊天：

import React, { useState, useEffect } from "react";
import "./Chat.css";
import { Avatar, IconButton } from "@material-ui/core";
import {
  Search,
  AttachFile,
  MoreVert,
  InsertEmoticon,
  Mic,
} from "@material-ui/icons";

import { useParams } from "react-router-dom";
import db from "./firebase";

function Chat() {
  const [input, setInput] = useState("");
  const { roomId } = useParams();
  const [roomName, setRoomName] = useState("");
  useEffect(() => {
    if (roomId) {
      db.collection("rooms")
        .doc(roomId)
        .onSnapshot((snapshot) => setRoomName(snapshot.data().name));
    }
  }, [roomId]);

  const sendMessage = (e) => {
    e.preventDefault();
    console.log(input);
    setInput("");
  };

  return (
    <div className="chat">
      <div className="chat_header">
        <Avatar src="https://res.cloudinary.com/shatadrucld/image/upload/v1597305602/qpqnqwyuokbupddqwuwc.jpg" />
        <div className="chat_headerInfo">
          <h3>{roomName}</h3>
          <p>Last seen at .....</p>
        </div>
        <div className="chat_headerRight">
          <IconButton>
            <Search />
          </IconButton>
          <IconButton>
            <AttachFile />
          </IconButton>
          <IconButton>
            <MoreVert />
          </IconButton>
        </div>
      </div>
      <div className="chat_body">
        <p className={`chat_message ${true && "chat-receiver"}`}>
          <span className="chat_name">Shatadru Roy</span>Hey guys
          <span className="chat_timestamp">3:52pm</span>
        </p>
      </div>
      <div className="chat_footer">
        <InsertEmoticon />
        <form>
          <input
            type="text"
            placeholder="Type a message"
            value={input}
            onChange={(e) => {
              setInput(e.target.value);
            }}
          ></input>
          <button type="submit" onClick={sendMessage}></button>
        </form>
        <Mic />
      </div>
    </div>
  );
}

export default Chat;

侧边栏：

import SidebarChat from "./SidebarChat";
import db from "./firebase";

function Sidebar() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const unsubscribe=db.collection("rooms").onSnapshot((snapshot) => {
      setRooms(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
    return ()=>{
      unsubscribe();
    }
  }, []);

  return (
    <div className="sidebar">
      <div className="sidebar_header">
        <Avatar />
        <div className="sidebar_headerRight">
          <IconButton>
            <DonutLarge />
          </IconButton>
          <IconButton>
            <Chat />
          </IconButton>
          <IconButton>
            <MoreVert />
          </IconButton>
        </div>
      </div>

      <div className="sidebar_search">
        <div className="sidebar_searchContainer">
          <SearchOutlined />
          <input placeholder="Seacrh chats" type="text"></input>
        </div>
      </div>
      <div className="sidebar_chats">
        <SidebarChat addNewChat />
        {rooms.map(room=>{
          return (<SidebarChat key={room.id} id={room.id} name={room.data.name}  />)
        })}
      </div>
    </div>
  );
}

export default Sidebar;

请帮我解决这个问题。我对这些概念很陌生，所以我完全停留在这个阶段。我在网上尝试了几种解决方案，但都没有用。

编辑： 我也试过使用 withRouter，但它也不起作用