面试题：React 中使用 Redirect 进行路由重定向的基础实现

Question

在 React 项目中，假设你已经配置好了基本的路由。现在需要在某个组件中，当用户点击一个按钮后，使用 Redirect 实现重定向到 '/home' 页面，写出具体的代码实现步骤和关键代码。

Answer 1

1. 引入相关模块： 在需要实现重定向的组件文件中，引入 Redirect 组件和 useState 钩子（用于控制重定向状态）。假设使用 React Router，代码如下：

import React, { useState } from'react';
import { Redirect } from'react-router-dom';

2. 编写组件并实现逻辑：

const MyComponent = () => {
  const [shouldRedirect, setShouldRedirect] = useState(false);

  const handleButtonClick = () => {
    setShouldRedirect(true);
  };

  if (shouldRedirect) {
    return <Redirect to="/home" />;
  }

  return (
    <div>
      <button onClick={handleButtonClick}>点击重定向</button>
    </div>
  );
};

export default MyComponent;

关键代码说明：

• const [shouldRedirect, setShouldRedirect] = useState(false);：定义一个状态 shouldRedirect 用于判断是否需要重定向，初始值为 false。
• const handleButtonClick = () => { setShouldRedirect(true); };：按钮点击事件处理函数，点击按钮时将 shouldRedirect 设置为 true。
• if (shouldRedirect) { return <Redirect to="/home" />; }：当 shouldRedirect 为 true 时，返回 Redirect 组件，实现重定向到 /home 页面。