ReactJS中OnClick事件跳转实现及react-router最新版本history.push()失效解决方案

Hey there! I totally get how frustrating this can be when old methods stop working out of the blue—let’s break down exactly how to handle navigation now, including form submission buttons.

1. Replacing withRouter & history.push() in Function Components #

First off, React Router v6 completely removed withRouter—that’s why your old history.push() approach isn’t working anymore. The good news is they gave us a cleaner, hook-based replacement: the useNavigate hook.

Here’s how to use it for click events:
First, import the hook:

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

Then initialize it in your component and use it in your onClick handler:

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

  const handleClick = () => {
    // Basic navigation to a target path
    navigate('/your-desired-page');
    
    // Optional: Pass state data to the target page
    // navigate('/your-desired-page', { state: { userInfo: { id: 456 } } });
  };

  return <button onClick={handleClick}>Go to Target Page</button>;
}

To access the passed state in the target page, use the useLocation hook:

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

function TargetPage() {
  const location = useLocation();
  const userInfo = location.state?.userInfo;

  return <div>User ID: {userInfo?.id}</div>;
}

2. Handling Navigation in Class Components #

If you’re still working with class components, you can create a custom higher-order component (HOC) to mimic the old withRouter behavior (since hooks don’t work in class components):

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

const withNavigate = (Component) => {
  return (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };
};

// Use the HOC with your class component
class MyClassBasedComponent extends React.Component {
  handleNavigation = () => {
    this.props.navigate('/target-page');
  };

  render() {
    return <button onClick={this.handleNavigation}>Navigate Now</button>;
  }
}

export default withNavigate(MyClassBasedComponent);

3. Form Submission Navigation #

For form submit buttons, you have two solid options:

Option 1: Use useNavigate in a Submit Handler #

Great if you need to run validation or process data before navigating:

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Do your form validation/data processing here
    const formData = new FormData(e.target);
    // ... process form data ...

    // Navigate after processing is done
    navigate('/success-page');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="userEmail" placeholder="Enter your email" />
      <button type="submit">Submit & Continue</button>
    </form>
  );
}

Option 2: Use React Router’s Built-in <Form> Component #

Perfect for simple forms where you don’t need custom pre-submission logic. This component handles navigation automatically when submitted:

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

function MySimpleForm() {
  return (
    <Form action="/success-page" method="post">
      <input type="text" name="username" placeholder="Enter username" />
      <button type="submit">Submit & Go</button>
    </Form>
  );
}

Why history.push() Stopped Working #

In React Router v6, the history object is no longer exposed directly like it was in v5. The team built useNavigate to be a more predictable, hook-aligned replacement that fits better with modern React patterns.

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