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

Question

J'ai un onglet logistique et si la valeur logisticData est nulle, je redirige la page vers "/logistic" depuis ":logisticId/edit". Cependant, lorsque j'exécute ce code, il ne redirige pas le code functionEditLogistic(){ const{state }=useLocation();constlogisticData=state;console.log(l

P粉352408038 · Answer

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

  ...
}