React Router 5实现Err组件延迟重定向（React+TS新手求助）

嘿，作为React和TypeScript的新手，能写出这样的Err组件已经很不错啦！针对你要在2秒后自动重定向到首页的需求，React Router 5里有两种实用的方式，我给你一步步拆解怎么补全代码：

方法一：使用useHistory钩子（函数组件首选） #

这是函数组件中处理路由跳转最常用的方式，步骤很简单：

1. 导入useHistory钩子：从react-router-dom里引入它
2. 在组件内创建history实例：调用useHistory()获取路由历史对象
3. 在setTimeout中执行跳转：用history.push()或者history.replace()实现重定向

这里推荐用history.replace('/')，因为它会替换当前的错误页路由记录，避免用户点击浏览器回退按钮时再次回到错误页面；如果用history.push('/')，错误页会留在历史栈里，用户回退还能看到。

补全后的完整代码如下：

import React, { FC, Fragment, useEffect } from "react";
// 1. 导入useHistory钩子
import { useHistory } from "react-router-dom";

const Err: FC<{ error: string }> = ({ error }) => {
  // 2. 创建history实例
  const history = useHistory();

  useEffect(()=>{
    const time = setTimeout(() => {
      // 3. 执行重定向，这里用replace更合适
      history.replace('/');
    }, 2000);
    return(()=> clearTimeout(time));
  },[error]) // useHistory返回的history是稳定值，不需要加到依赖数组里

  return (
    <Fragment>
      <div>{error}</div>
      <div>{"Contact site administrator"}</div>
    </Fragment>
  );
};

export default Err;

方法二：使用Redirect组件（适合条件渲染场景） #

如果你不想用钩子，也可以通过状态控制Redirect组件的渲染来实现跳转，但因为是延时跳转，还是需要结合useState和useEffect：

import React, { FC, Fragment, useEffect, useState } from "react";
import { Redirect } from "react-router-dom";

const Err: FC<{ error: string }> = ({ error }) => {
  const [shouldRedirect, setShouldRedirect] = useState(false);

  useEffect(()=>{
    const time = setTimeout(() => {
      setShouldRedirect(true);
    }, 2000);
    return(()=> clearTimeout(time));
  },[error])

  // 如果满足跳转条件，渲染Redirect组件
  if (shouldRedirect) {
    return <Redirect to="/" replace />;
  }

  return (
    <Fragment>
      <div>{error}</div>
      <div>{"Contact site administrator"}</div>
    </Fragment>
  );
};

export default Err;

两种方法都能实现需求，第一种更直接适合你的场景，第二种则是通过组件渲染的方式来控制路由，看你个人习惯选择啦！

内容的提问来源于stack exchange，提问作者Edgar