Navigasi dan ubah hala tidak mengubah hala ke laluan dalam penghala tindak balas

Question

Saya ada tab logistik jika logisticData 值为 null，我会将页面重定向到 "/logistic" from ":logisticId/edit"

Tetapi apabila saya melaksanakan kod ini ia tidak mengubah hala kod

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

  console.log(logisticData)

  const navigate = useNavigate();

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

Saya tertanya-tanya sama ada saya melakukan sesuatu yang salah atau ada cara untuk mencapai ini?

Answer 1

redirectFungsi utiliti hanya sah dalam fungsi pemuat dan operasi penghala data, bukan dalam komponen React.

Anda boleh mengeluarkan useEffect 挂钩中的 navigateimperatif tindakan navigasi melalui fungsi :

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

  ...
}

Atau anda boleh mengeluarkan Navigateperisytiharan tindakan navigasi melalui komponen :

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

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

  if (!logisticData) {
    return ;
  }

  ...
}