I'm in the final stages of developing a basic React instant chat messaging using Socket.io & React-Router to teach myself some core concepts.
我 一直 在 使用 GitHub 上 的 这个 项目 作为 参考 ：https://github.com/simpletut/react-real-time-chat-app 的 最 大 值
这里 有 一 个 实时 版本 ：https://react-chatapp-frontend.herokuapp.com/ 格式
我 使用 React-Router 将 用户 从 加入 页面 （ 在 这里 他们 可以 选择 他们 的 用户 名 和 房间 ， 然后 作为 变量 添加 到 URL 中 ） 重 定向 到 聊天 页面 。
即 以 用户 名 " john " 加入 " room1 " 的 用户 将 被 重 定向 到 ：请 访问 ：

function App() {
  return (
    <div className="App">

      <Router>
        <Routes>
          <Route path="/chat/:room/:name" element={<Chat />} />
          <Route path="/" element={<Join />} />
        </Routes>
      </Router>

    </div>
  );
}

中 的 每 一 个
然而 ， 目前 没有 什么 阻止 用户 进入 聊天 室 ， 而 没有 从 加入 页面 重 定向 。 这 也 意味 着 用户 可以 ' 创建 ' 房间 ， 只需 输入 一 个 URL 。 我 希望 用户 被 重 定向 到 加入 页面 或 根 ， 或者 只是 没有 访问 聊天 室 ， 而 没有 被 重 定向 到 那里 。
在 我 的 聊天 页面 中 ， 我 使用 useParams() 获取 路由 参数 ， 然后 加入 聊天 室 。

let { name, room } = useParams();

  const [currentUser, updateUser] = useState(name);
  const [currentRoom, updateCurrentroom] = useState(room);
  const [users, updateUsers] = useState([]);
  const [currentMessage, updateCurrentMessage] = useState('');

  const formRef = useRef(null);

  useEffect(() => {
    socket.on("receive_message", (data) => {
      addMessage(prevMessages => {
        return [...prevMessages, {
          username: data.username,
          time: new Date(),
          message: data.message
        }]
      })
    });

    
    socket.emit("join_room", {username: currentUser, room: room}, (err) => {
      if (err){
        console.log(err);
      }
    });

格式
我 已经 看 了 参考 代码 好几 遍 了 ， 就是 不 太 明白 他们 做 了 什么 不同 的 事情 ， 给 了 他们 这个 验证 。 有人 知道 如何 最 好 地 实现 这个 吗 ？