React JS中如何实现点击按钮从一个HTML页面路由跳转至另一页面？

你已经建好注册页、规划流程页两个独立组件的前提下，按以下步骤操作即可实现无刷新跳转：

• 第一步：安装路由依赖
  进入项目根目录，在终端执行安装命令：
  npm install react-router-dom
• 第二步：配置路由映射关系
  打开项目入口文件（React 18+ 版本默认是src/main.jsx，旧版本是src/index.js），用路由容器包裹根组件，同时配置路径和页面对应关系，参考代码如下：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
// 导入你已经创建的两个页面组件，路径按你实际的文件位置调整
import SignupPage from './pages/SignupPage'
import PlanningPage from './pages/PlanningPage'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Routes>
      {/* 注册页匹配站点根路径 */}
      <Route path="/" element={<SignupPage />} />
      {/* 规划流程页匹配/planning路径 */}
      <Route path="/planning" element={<PlanningPage />} />
    </Routes>
  </BrowserRouter>
)

• 第三步：给注册按钮绑定跳转逻辑
  注意JSX语法和原生HTML的区别：原生的class属性要换成className，跳转用路由提供的useNavigate钩子实现，不要用原生location跳转避免整页刷新。注册页组件参考代码：

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

export default function SignupPage() {
  const navigate = useNavigate()

  const handleJump = () => {
    // 跳转到之前配置的规划页路径
    navigate('/planning')
  }

  return (
    <div id="signup">
      <button className="signupbutton" onClick={handleJump}>
        Sign up
      </button>
    </div>
  )
}

• 第四步：完善规划流程页内容
  你之前写的标题有语法错误（h1标签未闭合），修正后放到规划页组件中即可：

export default function PlanningPage() {
  return (
    <h1>
      <strong>Let's get started! First up, where are you in the planning process?</strong>
    </h1>
  )
}

新手常见踩坑提示：

• JSX中所有HTML标签必须严格闭合，事件、类名等属性要改成驼峰写法（比如class→className、onclick→onClick）
• 路由配置里的path值和navigate()里传入的路径要完全一致，路径大小写敏感
• 只有被Routes/Route直接包裹的页面组件才能直接调用useNavigate这类路由钩子，如果是公共组件需要实现跳转，可以单独封装逻辑处理

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