如何通过onClick函数从Chats组件跳转至InsideChat组件？

你已经导入了react-router-dom的useNavigate，只需以下几步就能完成跳转功能：

1. 初始化导航实例
   在Chats组件函数内部，调用useNavigate()生成导航函数：

const Chats = () => {
  const navigate = useNavigate(); // 新增此行初始化导航
  const seeMsg = (id) => {
    // 跳转逻辑写在这里
  }
  // ... 其余原有代码
}

2. 编写跳转逻辑
   在seeMsg函数中，使用navigate跳转到目标路由。推荐通过路由参数传递用户ID，方便InsideChat组件获取对应聊天数据：

const seeMsg = (id) => {
  // 跳转到带用户ID的路由（示例路由为/chat/:id）
  navigate(`/chat/${id}`);
  console.log(id)
}

3. 配置路由规则
   确保在路由配置文件（如App.js或Routes.js）中，为InsideChat组件配置对应路由：

import { Routes, Route } from 'react-router-dom';
import Chats from './Chats';
import InsideChat from './InsideChat';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Chats />} />
      {/* 配置带参数的路由，id会作为参数传递给InsideChat */}
      <Route path="/chat/:id" element={<InsideChat />} />
    </Routes>
  );
}

4. 在InsideChat中获取路由参数
   如果需要在InsideChat中使用传递的用户ID，可通过useParams获取：

import { useParams } from 'react-router-dom';

const InsideChat = () => {
  const { id } = useParams(); // 获取路由中的用户ID参数
  // 根据id获取对应聊天数据并渲染
  return <div>聊天窗口：用户ID {id}</div>;
}

修改后的完整Chats组件代码 #

import React from 'react'
import { useNavigate } from 'react-router-dom'
import user from './api/Userdata'
import InsideChat from './InsideChat'

const Chats = () => {
  const navigate = useNavigate(); // 初始化导航函数
  const seeMsg = (id) => {
    // 跳转至带用户ID的InsideChat路由
    navigate(`/chat/${id}`);
    console.log(id)
  }

  return (
    <div className="main">
        { user.map((currUser) =>{
        return(
        <div className="user w-full h-14 my-1 flex justify-between content-center" key={currUser.id} onClick={() => seeMsg(currUser.id)}>
            <img className='shadow rounded-full max-w-full h-11 w-11 align-middle border-none' src={currUser.image} alt="用户头像"/>
            <div className="name pr-16 pl-1 justify-center text-center flex items-center text-gray-900 font-medium mb-1">{currUser.name}</div>
            <div className="time font-thin text-xs text-center flex items-center pr-2">{currUser.time}</div>
        </div>
          )})}
      </div>
  )
}

export default Chats

内容的提问来源于stack exchange，提问作者Aakash Saini