面试题：React中如何使用React Router进行简单的历史记录操作

Question

在React项目中，已引入React Router库，假设当前有两个页面组件Page1和Page2，当从Page1跳转到Page2后，如何使用React Router的历史记录操作方法实现返回Page1？请写出关键代码片段。

Answer 1

在React Router v5及之前版本，可以使用history对象来实现返回上一页：

1. 首先，通过withRouter高阶组件或useHistory钩子获取history对象。
   • 使用withRouter高阶组件（常用于类组件）：

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

class Page2 extends React.Component {
  goBack = () => {
    this.props.history.goBack();
  };

  render() {
    return (
      <div>
        <button onClick={this.goBack}>返回Page1</button>
      </div>
    );
  }
}

export default withRouter(Page2);

- 使用`useHistory`钩子（常用于函数组件）：

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

const Page2 = () => {
  const history = useHistory();
  const goBack = () => {
    history.goBack();
  };

  return (
    <div>
      <button onClick={goBack}>返回Page1</button>
    </div>
  );
};

export default Page2;

在React Router v6中，使用useNavigate钩子：

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

const Page2 = () => {
  const navigate = useNavigate();
  const goBack = () => {
    navigate(-1);
  };

  return (
    <div>
      <button onClick={goBack}>返回Page1</button>
    </div>
  );
};

export default Page2;