当前位置：首页 > React

React如何实现文案跳转

2026-03-31 18:06:48React

React实现文案跳转的方法

在React中实现文案跳转通常涉及两种场景：页面内锚点跳转和跨页面路由跳转。以下是具体实现方式：

使用锚点实现页面内跳转

通过<a>标签的href属性指向DOM元素的id，结合React的useRef钩子实现精准定位：

import { useRef } from 'react';

function Page() {
  const targetRef = useRef(null);

  return (
    <div>
      <a href="#section">跳转到目标区域</a>

      <div style={{ height: '1000px' }}>占位内容</div>

      <section id="section" ref={targetRef}>
        目标区域内容
      </section>
    </div>
  );
}

平滑滚动效果可通过CSS实现：

React如何实现文案跳转

html {
  scroll-behavior: smooth;
}

使用React Router实现页面跳转

安装路由库后通过Link组件或编程式导航实现：

npm install react-router-dom

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

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

  return (
    <>
      <Link to="/target-page">通过Link跳转</Link>

      <button onClick={() => navigate('/target-page')}>
        编程式导航跳转
      </button>
    </>
  );
}

带参数的跳转实现

传递参数可通过URL查询字符串或状态管理：

React如何实现文案跳转

<Link 
  to={{
    pathname: '/details',
    search: '?id=123',
    state: { fromPage: 'home' }
  }}
>
  查看详情
</Link>

接收参数组件中获取：

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

function Details() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const id = queryParams.get('id');
  const stateData = location.state;
}

动态锚点跳转控制

对于需要条件触发的跳转，可结合事件处理：

function ScrollButton() {
  const handleClick = () => {
    document.getElementById('target').scrollIntoView({
      behavior: 'smooth'
    });
  };

  return (
    <button onClick={handleClick}>
      点击平滑滚动
    </button>
  );
}