如何在React中通过href实现按钮跳转至注册页面？

步骤1：安装React Router依赖 #

单页应用内的页面跳转需要用到React Router，先安装依赖：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

步骤2：配置App.js的路由结构 #

修改你的App.js，引入路由相关组件和Signup组件，将页面组件包裹在路由容器中，并注册注册页面的路由规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Signup from './path-to-your-signup-component'; // 替换成你的Signup组件实际路径
import Navbar from './Navbar';
import Hero from './Hero';
import About from './About';
import Pricing from './Pricing';
import Footer from './Footer';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        {/* 欢迎页路由（默认展示的页面） */}
        <Route path="/" element={
          <div>
            <Hero />
            <About />
            <Pricing />
          </div>
        } />
        {/* 注册页面路由 */}
        <Route path="/signup" element={<Signup />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

注意：把./path-to-your-signup-component替换成你实际的Signup组件文件路径，比如./components/Signup。

步骤3：修改欢迎页的跳转按钮 #

把原来的原生<a>标签换成React Router提供的<Link>组件，这样就能实现单页应用的无刷新跳转：
首先在包含按钮的组件（比如Hero组件）中导入Link：

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

然后修改按钮代码：

<Link to="/signup" className="btn btn-brand me-2">Get Started</Link>

补充说明 #

• 以上代码基于React Router v6版本（当前主流版本），如果是旧版本语法会有差异，建议使用v6。
• 如果需要从注册页返回欢迎页，只需在注册页添加类似<Link to="/">返回首页</Link>的按钮即可。

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