La navigation et la redirection ne redirigent pas vers le chemin dans le routeur de réaction

Question

J'ai un onglet logistique si logisticData 值为 null，我会将页面重定向到 "/logistic" from ":logisticId/edit"

Mais lorsque j'exécute ce code, il ne redirige pas le code

function EditLogistic() {
  const { state } = useLocation();
  const logisticData = state;

  console.log(logisticData)

  const navigate = useNavigate();

  if (!logisticData) {
    console.log("empty")
    navigate('/logistic')
    redirect('/logistic')
  }
}

Je me demande si je fais quelque chose de mal ou s'il existe un moyen d'y parvenir ?

Answer 1

redirectLes fonctions utilitaires ne sont valables que dans les fonctions de chargement et d'exploitation du routeur de données, pas dans les composants React.

Vous pouvez émettre des actions useEffect 挂钩中的 navigateimpérativesde navigation via la fonction  :

import { useLocation, useNavigate } from 'react-router-dom';

function EditLogistic() {
  const { state } = useLocation();
  const logisticData = state;

  const navigate = useNavigate();

  useEffect(() => {
    if (!logisticData) {
      navigate("/logistic", { replace: true });
    }
  }, [logisticData, navigate]);

  ...
}

Ou vous pouvez émettre des actions de navigation Navigatedéclarativesvia le composant  :

import { Navigate, useLocation } from 'react-router-dom';

function EditLogistic() {
  const { state } = useLocation();
  const logisticData = state;

  if (!logisticData) {
    return ;
  }

  ...
}