So I have this basic component `<Redirectable />`:

```
import React from 'react';
import {
  useParams,
  useHistory,
  Redirect,
} from 'react-router-dom';

export default () => {
  const history = useHistory();
  const {id} = useParams();

  if (!checkMyId(id) {
    // invalid ID, go back home
    history.push('/');
  }
  return <p>Hey {id}</p>
}

```

But I get the following error:

```
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

```

I also tried: `<Redirect push to="/" />`, but same error.

What's the correct way to handle this? I read about `onEnter` callback at `<Router />` level, but as far as I'm concerned, the check should happen at `<Redirectable />` level.

There should be a solution, shouldn't it? I don't feel like I'm doing something completely anti-react-pattern, am I?