如何让React Router中的div元素充当Link实现路由跳转？

你的代码存在两个核心问题导致路由跳转失败，以下是具体分析和解决方法：

问题分析 #

1. 路由路径大小写不匹配
   路由配置中定义的路径是/bookmarks（全小写），但Link组件的to属性写的是/Bookmarks（首字母大写），React Router的路径匹配是区分大小写的，这会直接导致路由无法匹配。

2. Link标签未关联可点击区域
   当前的<Link to='/Bookmarks'/>是空标签，没有包裹任何可交互内容，点击外部的div不会触发Link的跳转逻辑。

解决方法 #

方法一：用Link包裹可点击区域 #

将Link放在外层，包裹整个需要点击的div内容，这样点击div内的任何区域都会触发路由跳转：

function Bookmarks() {
  return (
    <>
      <Link to='/bookmarks' style={{ textDecoration: 'none', color: 'inherit' }}>
        <div className="book">
          <BookmarkIcon className='icon' />
          <h5 className='para'>Bookmarks</h5>
        </div>
      </Link>
    </>
  )
}

注：添加style是为了消除Link默认的文本下划线和颜色变化，避免破坏原有样式，可根据实际需求调整。

方法二：使用useNavigate钩子手动触发跳转 #

如果不想用Link包裹，可通过useNavigate钩子给div绑定点击事件，手动触发路由跳转：

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

function Bookmarks() {
  const navigate = useNavigate();

  const handleJump = () => {
    navigate('/bookmarks');
  };

  return (
    <>
      <div 
        className="book"
        onClick={handleJump}
        style={{ cursor: 'pointer' }}
      >
        <BookmarkIcon className='icon' />
        <h5 className='para'>Bookmarks</h5>
      </div>
    </>
  )
}

额外检查 #

确保你的根组件已经用BrowserRouter（或其他Router类型）包裹，这是React Router生效的前提：

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

function App() {
  return (
    <BrowserRouter>
      {/* 你的页面组件和路由配置 */}
    </BrowserRouter>
  );
}

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