ReactJS中为按钮添加onClick实现页面跳转的问题求助

嘿，别着急！作为React新手遇到按钮跳转的问题太正常啦，我来帮你梳理几种靠谱的解决方案～

方法一：用React Router（单页应用首选） #

既然是React开发的着陆页，单页应用的标准做法是用React Router来管理页面路由，这样跳转不会刷新页面，体验更流畅。步骤如下：

1. 先安装依赖（还没装的话）：

   npm install react-router-dom
   

2. 在根组件（比如App.js）里配置路由规则：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   import LandingPage from './pages/LandingPage'; // 你的着陆页组件
   import NextPage from './pages/NextPage'; // 目标跳转页组件
   
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="/next" element={<NextPage />} />
         </Routes>
       </Router>
     );
   }
   
   export default App;
   

3. 回到着陆页组件，用useNavigate钩子实现点击跳转：

   import { useNavigate } from 'react-router-dom';
   
   function LandingPage() {
     const navigate = useNavigate();
   
     const goToNextPage = () => {
       navigate('/next'); // 这里填你配置的目标页路由路径
     };
   
     return (
       <button onClick={goToNextPage}>前往下一页</button>
     );
   }
   
   export default LandingPage;
   

要是你觉得写函数麻烦，也可以直接用Link组件（React封装的跳转标签）把按钮包起来：

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

function LandingPage() {
  return (
    <Link to="/next">
      <button>前往下一页</button>
    </Link>
  );
}

方法二：跳转到外部页面/静态HTML页 #

如果你的“下一页”是外部网站或者项目里的静态HTML文件，直接用原生JS的window.location就行：

function LandingPage() {
  const goToNextPage = () => {
    // 内部静态页填相对路径
    window.location.href = './next-page.html';
    // 外部网站填完整URL
    // window.location.href = 'https://your-target-site.com';
  };

  return (
    <button onClick={goToNextPage}>前往下一页</button>
  );
}

为啥你之前的方法没生效？ #

你提到用a标签和普通JS函数没效果，大概率是这两个原因：

• 单页应用里直接用普通a标签会触发页面刷新，而且如果没配置React Router，路由路径不匹配就跳不动；
• 注意React里的点击事件是驼峰式的onClick，不是HTML里的小写onclick，如果写错了函数就绑定不上哦～

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