React - вызов метода после перенаправления

Question

У меня есть две разные ссылки. Одна главная страница, другая галерея. У меня на главной странице 3 ссылки с методом scrollIntoView onClick, которые ведут меня в разные разделы. Я хочу реализовать метод, перенаправляющий меня из компонента галереи на главную страницу, и когда это будет сделано, вызовите метод scrollIntoView.

метод goToContact:

goToContact = e => {
    if (window.location.pathname === "/fotobudka/") {
      this.fbContactElement.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    }
    if (window.location.pathname !== "/fotobudka") {
      this.changeUrl();
      this.goto();
    }
  };

Изменить URL перенаправить меня на главную страницу:

changeUrl() {
    return <Redirect to="/fotobudka/" />;
  }

Когда это будет сделано:

goto = () => {
    setTimeout(() => {
      let fbContactElement = document.getElementById("contact-form");
      fbContactElement.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    }, 100);
  };

Мой метод работает отлично, но я знаю, что SetTimeout не является хорошим решением. Я попытался async / await, но я думаю, что я не достаточно хорош, чтобы реализовать это.

Как выполнить рефакторинг без использования функции SetTimeout?

Answer 1

Вы можете использовать хук жизненного цикла componentDidMount() для выполнения некоторого кода при загрузке компонента. Но вы должны избежать бесконечного цикла обновления, передавая некоторый параметр запроса, например, doScroll=true. Теперь вы можете просто проверить в своем хуке componentDidMount() параметры запроса и выполнить функцию прокрутки

Answer 2

Я решил свою проблему, на одном форуме я проверил, что через интервал мы можем проверить, существует ли элемент на странице.В React это выглядит так:

goto = selector => {
if (window.location.pathname !== "/fotobudka/") {
  this.constructor.changeUrl();
}
let checkExist = setInterval(() => {
  let element = document.getElementById(selector);
  if (element) {
    element.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
    clearInterval(checkExist);
  }
}, 100);
};

static changeUrl() {
  return <Redirect to="/fotobudka/" />;
}

Answer 3

Вы должны использовать setState, чтобы установить свойство, которое будет отображать внутри вашего метода render ().

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  goTo = () => {...}

  goToContact = e => {
    this.setState({ redirect: true },
    ()=>goto());
  }

  render () {
    const { redirect } = this.state;

    if (redirect) {
      return <Redirect to='/fotobudka'/>;
    }

    return (...)
  }
}

Вы также можете увидеть пример в официальной документации: https://reacttraining.com/react-router/web/example/auth-workflow