Is using an if statement to redirect user away if page does not exists good practice in React?

user_18218109 0
Viewed 41

Basically, I am trying to route a user based on whether or not the page exists. So I tried to do an if statement to check the prop profileExists. If it is true, it would stay on the same page. Otherwise, it would reroute the user away to another route, which is the /homepage route. I was wondering if this is an ok thing to do in React or not. Please see code below:

renderWithRoot(component) {
  const { classes, profileExists, history } = this.props;

  if (profileExists === false) {
    history.push('/homepage');
  }

  return (
    <div className={classes.root}>
      {component}
    </div>
  );
}
react-router-dom react-router reactjs dom javascript
1 Answers

It is ok, but not quite in the way you are using it. You should either issue the redirect as an imperative navigation in a useEffect hook

useEffect(() => {
  if (!profileExists) {
    history.replace('/homepage');
  }
}, [profileExists]);

...

return (
  <div className={classes.root}>
    {component}
  </div>
);

or issue the redirect as a declarative navigation via rendering the Redirect component.

if (!profileExists) {
  return <Redirect to='/homepage' />;
}

return (
  <div className={classes.root}>
    {component}
  </div>
);
user_86908570
Related