Как заставить экспедитор реагировать на роутер 5

Question

Я новичок в реакции и машинописи. У меня есть компонент Err. Я хочу перенаправить его с помощью реагирующего маршрутизатора 5?.

import React, { FC, Fragment, useEffect } from "react";

const Err: FC<{ error: string }> = ({ error }) => {
  useEffect(()=>{
   const time = setTimeout(() =>  {???(`/`)}, 2000);
   return(()=> clearTimeout(time));
  },[error])
  return (
    <Fragment>
      <div>{error}</div>
      <div>{"Contact site administrator"}</div>
    </Fragment>
  );
};

Answer 1

Я не знаю, как реагирует роутер 5. Но если вы используете реакцию маршрутизатора 4.

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

    const HandlerErr: FC<{ error: string }> = ({ error}) => {
      const [booleURL, setBooleURL] = useState(false);

      useEffect(()=>{
      const time = setTimeout(() =>  {setBooleURL(true)}, 2000);
      return(()=> clearTimeout(time));
      },[error])
      return (
        <Fragment>
         { booleURL && <Redirect to="/"/>}
          <div>{error}</div>
          <div>{"Contact site administrator"}</div>
        </Fragment>
      );
    };

или

import React, { FC, useEffect } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface OwnProps {
  error: string;
}

type Props = OwnProps & RouteComponentProps<any>;

const HandlerErr: FC<Props> = ({ error, history }) => {
  useEffect(() => {
   const timeout = setTimeout(() => {
     history.push(`/`);
   }, 2000);

   return () => { 
     clearTimeout(timeout);
   };
  }, [error]);

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

export default withRouter(HandlerErr);