如何使用 onclick 函数将用户从第一个组件重定向到第二个组件

Question

import React from 'react'
import { useNavigate } from 'react-router-dom'
import user from './api/Userdata'
import InsideChat from './InsideChat'
const Chats = () => {
  const seeMsg = (id) => {
//here: what can I write that it will redirect user to IndideChat component
    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

如何使用 onclick 将用户重定向到第一个组件到第二个组件。 seeMsg 函数中有一条注释。第二个组件也被声明为 InsideChat。我怎样才能将用户重定向到那里。

Answer 1

您只能导航到不同组件的路线：

const Chats = () => {
  const navigate = useNavigate();
  const seeMsg = (id) => {
   navigate('/yourcomponentpath') 
   //or if you want dynamic navigation:
   navigate(`/yourcomponentpath/{id}`) 
  }
  return(...)
}