React - Call method after redirect

Question

I have two different links. One is main Page, other is gallery. I have on main page 3 links with method scrollIntoView onClick that are taking me to different sections. I want to implement method redirecting me from gallery component to main page and when it's done call method scrollIntoView.

goToContact method:

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

Change Url redirect me to main page:

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

When it's done:

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

My method works perfectly, but I know SetTimeout isn't good solution. I've tried async/await but I think I am not good enough to implement that.

How to refactor this without using SetTimeout function ?

Have you tried to use `browserHistory`? [Check this](https://github.com/ReactTraining/react-router/issues/3554) or [this](https://stackoverflow.com/questions/45373742/detect-route-change-with-react-router?rq=1) — Marlom, Nov 10 '18 at 18:58

score 1 · Answer 1 · edited Nov 10 '18 at 19:40

1

You have to use setState to set a property that will render the inside your render() method.

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 (...)
  }
}

You can also see an example in the official documentation: https://reacttraining.com/react-router/web/example/auth-workflow

edited Nov 10 '18 at 19:40

victor zadorozhnyy

675
1
10
19

answered Nov 10 '18 at 19:16

Ammar Iqbal

41
4

https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs/45209367 – victor zadorozhnyy Nov 10 '18 at 19:17

score 1 · Accepted Answer · answered Nov 12 '18 at 20:38

I solved my issue, in one forum I've checked that via interval we can check if item already exist on page. In React it looks like this:

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

score 0 · Answer 3 · answered Nov 10 '18 at 19:22

0

You can use the componentDidMount() lifecycle hook for executing some code when a component is loaded. But you have to avoid an infinite update cycle by passing some query param something like doScroll=true. Now you can simply check inside your componentDidMount() hook for your query param and execute your scroll function

answered Nov 10 '18 at 19:22

Pommesloch

446
3
16

Yeah i did that, and my element is undefined – Freestyle09 Nov 10 '18 at 22:38
Which element do you mean? – Pommesloch Nov 11 '18 at 18:21
fbContactElement – Freestyle09 Nov 11 '18 at 20:25
Can you create an online demo from your app. so we can help you to debug it? – Pommesloch Nov 12 '18 at 20:33

React - Call method after redirect

3 Answers3