如何react页面跳转

React 页面跳转方法

在 React 中实现页面跳转可以通过多种方式，以下是常见的几种方法：

使用 React Router 的 Link 组件

React Router 是 React 生态中最常用的路由库，通过 Link 组件可以实现声明式导航。

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

function App() {
  return (
    <Link to="/target-page">跳转到目标页面</Link>
  );
}

使用 React Router 的 useNavigate Hook

在函数组件中，可以使用 useNavigate Hook 实现编程式导航。

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

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

  const handleClick = () => {
    navigate('/target-page');
  };

  return (
    <button onClick={handleClick}>跳转到目标页面</button>
  );
}

使用 window.location 进行跳转

如果需要完全刷新页面，可以直接使用原生的 window.location。

function App() {
  const handleClick = () => {
    window.location.href = '/target-page';
  };

  return (
    <button onClick={handleClick}>跳转到目标页面</button>
  );
}

使用 history API

在类组件中，可以通过 history 对象实现跳转。

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

class App extends React.Component {
  handleClick = () => {
    this.props.history.push('/target-page');
  };

  render() {
    return (
      <button onClick={this.handleClick}>跳转到目标页面</button>
    );
  }
}

export default withRouter(App);

使用 Redirect 组件

在某些条件下，可以通过 Redirect 组件实现重定向。

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

function App() {
  const shouldRedirect = true;

  if (shouldRedirect) {
    return <Redirect to="/target-page" />;
  }

  return <div>当前页面</div>;
}

注意事项

• 使用 React Router 时，确保已正确配置路由。
• window.location 会导致页面完全刷新，可能不适用于单页应用（SPA）。
• useNavigate 和 history API 适用于编程式导航，适合在事件处理函数中调用。

根据具体需求选择合适的方法，React Router 提供的方式更适合单页应用的导航。