Не перенаправляет на путь, указанный в React JS

Question

        AuthService.createDesigns(data).then(res => {
            if (res.data.status === "success") {
                const designId = res.data.data.id
                return <Redirect to={{
                    pathname: `${match.url}/${designId}`,
                    props: hoodieData
                }} />
            }
            return true
        })

Идет внутри оператора if, но не перенаправляет на указанный путь.

Answer 1

Компонент <Redirect> может работать, только если вы вернете его во время рендеринга. Вы не показываете контекст, в котором находится этот код, но, поскольку он асинхронный, невозможно что-либо отобразить.

У вас есть два варианта:

1) Установить состояние, вызывая повторное рендеринг, затем отрендерить <Redirect>

const Example = () => {
  const [redirectTo, setRedirectTo] = useState(null);
  useEffect(() => {
    AuthService.createDesigns(data).then(res => {
      if (res.data.status === "success") {
        const designId = res.data.data.id
        setRedirectTo({
          pathname: `${match.url}/${designId}`,
          state: hoodieData
        })
      }
    });
  }, []);

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

  // else, render the component as normal
}

2) Или тот, который я бы сделал : используйте history.replace вместо <Redirect> компонента

const history = useHistory();
useEffect(() => {
  AuthService.createDesigns(data).then(res => {
    if (res.data.status === "success") {
      const designId = res.data.data.id
      history.replace(`${match.url}/${designId}`, hoodieData);
    }
  });
}, []);

// render the component as normal

Answer 2

Вы пытаетесь вернуть React JSX из вызова API? Это не так, как вы должны перенаправить. Используйте вашу историю (используйте ловушку History, если вы используете последнюю версию маршрутизатора реагирования);

 AuthService.createDesigns(data).then(res => {
        if (res.data.status === "success") {
            const designId = res.data.data.id
            history.replace(`${match.url}/${designId}`, hoodieData);
           // return <Redirect to={{
             //   pathname: `${match.url}/${designId}`,
               // props: hoodieData
           // }} />
        }
        return true
    })

Использование ловушки useHistory -

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

AuthService.createDesigns(data).then(res => {
        if (res.data.status === "success") {
            const designId = res.data.data.id
            history.replace(`${match.url}/${designId}`, hoodieData); //or history.push
           // return <Redirect to={{
             //   pathname: `${match.url}/${designId}`,
               // props: hoodieData
           // }} />
        }
        return true
    })

Answer 3

Это сработало

        AuthService.createDesigns(data).then(res => {
            if (res.data.status === "success") {
                const designId = res.data.data.id
                history.push({
                    pathname: `${match.url}/${designId}`,
                    state: hoodieData
                })
            }
            return true
        })

Спасибо за вашу помощь.

Answer 4

Вы хотели использовать state вместо props?

state: hoodieData