React进行路由跳转的方法汇总

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

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/path-to-navigate');
  };

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

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

const MyComponent = () => {
  return <Navigate to="/path-to-navigate" />;
};

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

const MyComponent = () => {
  return <Link to="/path-to-navigate">Go to Path</Link>;
};

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/path-to-navigate');
  };

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

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

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.history.push('/path-to-navigate');
  };

  render() {
    return <button onClick={this.handleClick}>Go to Path</button>;
  }
}

export default withRouter(MyComponent);

const MyComponent = () => {
  const handleClick = () => {
    window.location.href = '/path-to-navigate';
  };

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

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const MyComponent = () => {
  const handleClick = () => {
    history.push('/path-to-navigate');
  };

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

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

const MyComponent = () => {
  return <Redirect to="/path-to-navigate" />;
};