React常见跳转方式汇总

在React中，路由跳转通常是通过使用react-router-dom库实现的，它是React的一个第三方库，专门用于处理在React应用程序中的路由。以下是如何在不同的情况下使用react-router-dom进行路由跳转：

使用<Link>或<NavLink>组件

这是进行路由跳转最基本的方法，它会在你的应用中生成一个链接，用户可以点击它来进行页面跳转。

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

function App() {
  return (
    <div>
      <Link to="/about">About</Link>
    </div>
  );
}

使用useHistory Hook

在React Router v5中，useHistory是一个hook，它可以让你访问history实例，这可以用来导航。

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

function MyComponent() {
  let history = useHistory();

  function handleClick() {
    history.push('/home');
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

使用useNavigate Hook

从React Router v6开始，useHistory被useNavigate取代。useNavigate是一个hook，它让你可以进行声明式的、不可逆的导航。

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

function MyComponent() {
  let navigate = useNavigate();

  function handleClick() {
    navigate('/home');
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

使用<Redirect>组件

如果你需要在渲染时进行路由跳转，可以使用<Redirect>组件。

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

function MyComponent({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }

  return <div>Welcome back!</div>;
}

使用navigate函数（在组件外）

如果你需要在一个不是React组件的地方进行导航（例如，在Redux action中），你可以创建一个history实例，并在整个应用中使用它。

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

// 然后在需要的地方使用
history.push('/some/path');

然后在你的<Router>组件中使用这个自定义的history实例。

import { Router } from 'react-router-dom';
import { history } from './yourHistoryFile';

function App() {
  return (
    <Router history={history}>
      {/* your routes */}
    </Router>
  );
}

确保你使用的是与你的React Router版本相对应的API和组件。React Router的API在不同的版本之间有所不同，以上示例主要基于React Router v5和v6。