React方法内部实现页面跳转问题（初学者求助）

Hey there! Since you're just starting out with React, let's walk through how to make that "Proceed" button jump to the second part of your form. There are two common approaches depending on whether you're building a single-page application (SPA) or a traditional multi-page app.

Option 1: Using React Router (Recommended for SPAs) #

Most React projects rely on React Router for smooth client-side navigation. Here's how to set it up for your class component:

Step 1: Install React Router (if you haven’t already) #

Run this command in your project directory:

npm install react-router-dom
# or
yarn add react-router-dom

Step 2: Update Your Component #

Since your component uses this.handleClick, it’s a class component—you’ll need the withRouter higher-order component to access the history prop. Here’s the full example:

import React from 'react';
import { withRouter } from 'react-router-dom';

class FirstForm extends React.Component {
  handleClick = () => {
    // Navigate to your second form's route
    this.props.history.push('/second-form');
  };

  render() {
    return (
      <div>
        {/* Your text inputs and radio buttons go here */}
        <div className="ProceedButton">
          <button name="Proceed" type="button" onClick={this.handleClick}>Proceed</button>
        </div>
      </div>
    );
  }
}

// Wrap your component with withRouter to access navigation tools
export default withRouter(FirstForm);

Note for React Router v6 Users

If you’re on React Router v6, withRouter is no longer available. You can either convert your component to a function component and use the useNavigate hook:

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

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

  const handleClick = () => {
    navigate('/second-form');
  };

  return (
    <div>
      {/* Your form elements */}
      <div className="ProceedButton">
        <button name="Proceed" type="button" onClick={handleClick}>Proceed</button>
      </div>
    </div>
  );
}

export default FirstForm;

Or create a custom higher-order component if you want to keep your component as a class.

Option 2: Native Browser Navigation (For Multi-Page Apps) #

If you’re not using React Router and need to jump to a separate HTML page, use the browser’s native window.location object:

handleClick = () => {
  // Navigate to a new page (adds to browser history)
  window.location.href = '/second-form.html';

  // OR use replace if you don’t want users to go back to the first form via the back button
  // window.location.replace('/second-form.html');
};

Quick Recap #

• Use React Router for single-page apps (it keeps navigation fast without reloading the whole page).
• Use native window.location if you need to navigate to a separate page outside your React SPA.

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