Question

我正在尝试使用React和Firebase进行WhatsApp Web克隆。在这里，我要实现的功能是，单击窗口左侧边栏中的特定聊天会在右侧打开一个聊天主体。为此，我在React中使用Switch and 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;

但是，每次都只显示边栏。即使在我的确切家庭路线（“ /”）中添加了聊天组件，也不会显示聊天。 as shown here

当我在代码中交换Chat和Sidebar组件时，仅显示Chat组件like this

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

我特定组件的代码是：

聊天：

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，但是它也不起作用

Answer 1

尝试将<Sidebar />移出<Switch>组件。如果是持久性的，那么它应该在<Switch/>

之外

React路由未呈现特定组件

1 个答案: