React.js 中如何处理路由跳转

在 React.js 中，处理路由跳转通常使用 react-router-dom 库。以下是使用 react-router-dom 进行路由跳转的几种方法：

1. 使用 Link 组件：

Link 组件是 react-router-dom 提供的一个用于导航的组件，它可以在不刷新页面的情况下实现页面跳转。

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

function App() {
  return (
    <div>
      <Link to="/">首页</Link>
      <Link to="/about">关于我们</Link>
    </div>
  );
}

2. 使用 useHistory Hook：

useHistory 是一个 React Hook，它提供了一个 history 对象，可以用来操作浏览器的历史记录。

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

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

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <button onClick={handleClick}>跳转到关于我们页面</button>
  );
}

3. 使用 useNavigate Hook（React Router v6）：

在 React Router v6 中，useHistory 被替换为 useNavigate。

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

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

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <button onClick={handleClick}>跳转到关于我们页面</button>
  );
}

4. 使用编程式导航（编程式路由跳转）：

在类组件中，可以通过 this.props.history.push() 方法实现路由跳转。

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

class MyComponent extends Component {
  handleClick = () => {
    this.props.history.push('/about');
  };

  render() {
    return (
      <button onClick={this.handleClick}>跳转到关于我们页面</button>
    );
  }
}

export default withRouter(MyComponent);

以上就是在 React.js 中处理路由跳转的几种方法。在实际项目中，可以根据需求选择合适的方法进行路由跳转。