React：如何不使用react-router-dom通过自定义组件实现页面跳转

既然用React Router，其实有几种更简洁的方式，不用在每个Room组件里手动写跳转逻辑：

1. 用 <Link> 包裹Room组件 #

直接在遍历的时候用react-router-dom的<Link>把Room包起来，Room组件本身不需要处理跳转逻辑，代码更解耦：

{rooms.map(room => (
  <Link to={`/rooms/${room.id}`} key={room.id} style={{ textDecoration: 'none', color: 'inherit' }}>
    <Room room={room} />
  </Link>
))}

这里加style是为了去掉Link默认的文本样式，避免影响Room组件的UI。如果Room里有按钮之类的可点击元素，要注意阻止事件冒泡，或者把Link放在合适的层级。

2. 给Room组件传入跳转方法（适合需要自定义点击逻辑的场景） #

如果Room组件内部需要判断是否允许跳转，或者有额外的点击逻辑，可以用useNavigate钩子生成跳转方法，传给Room：

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

// 父组件里
const navigate = useNavigate();

{rooms.map(room => (
  <Room 
    room={room} 
    key={room.id}
    onClick={() => navigate(`/rooms/${room.id}`)}
  />
))}

// Room组件里
const Room = ({ room, onClick }) => {
  return (
    <div onClick={onClick}>
      {/* 房间内容 */}
    </div>
  );
}

这种方式灵活度更高，能在跳转前加校验，比如判断用户权限之类的。

3. 用useLinkClickHandler（更底层的方式） #

如果需要完全自定义点击行为，比如结合鼠标右键菜单等场景，可以用useLinkClickHandler：

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

// Room组件里
const Room = ({ room }) => {
  const handleClick = useLinkClickHandler(`/rooms/${room.id}`);
  
  return (
    <div onClick={handleClick}>
      {/* 房间内容 */}
    </div>
  );
}

这个钩子会帮你处理默认的Link行为，比如阻止默认跳转、处理键盘事件等，比自己写navigate更规范。

其实React Router本身就是React生态里做路由跳转的标准方案，上面这几种方式都是基于它的优化，既符合React的组件设计思路，又能让代码更简洁易维护。

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