переадресация с помощью history.push

Question

Я написал здесь код

import React, { FC, Fragment, useEffect } from "react";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();

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

Я использую компонент HandlerErr для перенаправления.но по какой-то причине это не работает history.push ( / ). Я снял видео

Answer 1

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);

Answer 2

Вам необходимо использовать историю из react-router-dom

как

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

class Test extends Component {
  render () {
    const { history } = this.props

    return (
     <div>
       <Button onClick={() => history.push('./path')}
     </div>
    )
  }
}

export default withRouter(Test)