Navigation and redirection not redirecting to path in react router

Question

I have a logistics tab, if logisticData value is null, I redirect the page to "/logistic" from ":logisticId/edit" However, when I execute this code, it does not redirect the code functionEditLogistic(){ const{state}=useLocation();constlogisticData=state;console.log(l

P粉352408038 · Answer

redirectUtility functions are only valid in the loader and operation functions of the data router, and have no effect in React components.

You can issue imperative navigation operations through the navigate function in the useEffect hook:

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

  ...
}

Alternatively you can issue declarative navigation actions via the Navigate component:

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

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

  if (!logisticData) {
    return ;
  }

  ...
}