Saya membuat komponen 404 Tidak Ditemukan, saya ingin mengarahkan ulang pengguna setelah 3 detik tergantung pada apakah pengguna masuk atau tidak. itu diperiksa dengan status isAuthenticated.

Ini komponen NotFound.js saya;

import React, { Fragment } from 'react';
import notfound from '../../img/404.svg';
import { useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const NotFound = ({ auth: { isAuthenticated } }) => {
 const styles = {
  width: 'calc(100% - 100px)',
  height: '600px',

  position: 'relative',
  top: '200px',
  marginBottom: '150px',
 };
 useEffect(() => {
    setTimeout(() => {
      if (isAuthenticated) {
        console.log('hi');
      return <Redirect to='/adverts'></Redirect>;
    } else if (!isAuthenticated) {
       console.log('hi2');
     return <Redirect to='/'></Redirect>;
    }
  }, 3000);
});


  return (
      <Fragment>
        <img src={notfound} style={styles}></img>
    </Fragment>
   );
 };

 NotFound.propTypes = {
    auth: PropTypes.object,
 };

 const mapStateToProps = (state) => ({
    auth: state.auth,
 });

 export default connect(mapStateToProps)(NotFound);

Di sini adalah console.log;
consolelog reactjs redux react-redux react-router

-1
wasilikoslow 5 Januari 2021, 14:14

3 jawaban

Jawaban Terbaik

Coba gunakan useHistory.

import { useHistory } from "react-router-dom";

const NotFound = ({ auth: { isAuthenticated } }) => {
  const history = useHistory()
  useEffect(() => {
    setTimeout(() => {
      if (isAuthenticated) {
        console.log('hi');
      history.push('/adverts')
    } else if (!isAuthenticated) {
      console.log('hi2');
      history.push('/')
    }
    }, 3000);
  });

  ...
}
1
Naren 5 Januari 2021, 11:24

Itu karena fungsi callback setTimeout bukan bagian dari pernyataan pengembalian komponen NotFound.

Jika Anda perlu menggunakan Komponen Redirect, Anda perlu melakukan sesuatu seperti ini:

const [redirect, setRedirect] = useState(null);
useEffect(() => {
    setTimeout(() => {
      if (isAuthenticated) {
        console.log('hi');
        setRedirect('/adverts')
    } else if (!isAuthenticated) {
       console.log('hi2');
        setRedirect('/')
    }
  }, 3000);
});

if(redirect){
  return <Redirect to={redirect} />
}

return <>...</>

//+++++++++++++++++++
//or use history object like this:

const history = useHistory();
useEffect(() => {
    setTimeout(() => {
      if (isAuthenticated) {
        console.log('hi');
        history.push('/adverts')
    } else if (!isAuthenticated) {
       console.log('hi2');
        history.push('/')
    }
  }, 3000);
});

return <>...</>
1
Taghi Khavari 5 Januari 2021, 11:36

Anda harus memiliki perenderan bersyarat dari <Redirect /> sebagai bagian dari pernyataan pengembalian Anda.

Untuk jawaban yang lebih detail, periksa Cara menggunakan Redirect di react-router-dom baru dari Reactjs

0
Luka 5 Januari 2021, 11:25