перед отображением страницы проверьте, есть ли на сервере параметр URL

Question

Я создаю приложение, в котором у меня есть параметр URL, например /competition/:id. Когда пользователь обращается к этому URL, я хочу проверить, существует ли идентификатор соревнования перед рендерингом. До сих пор, когда я обращаюсь к нему напрямую, он отображает Navigation и AdminNavigation, а затем через секунду он перенаправляет на /competition (так как идентификатор, который я вставил в URL, не существует). Что я могу сделать, чтобы улучшить взаимодействие с пользователем, чтобы он не показывал страницу, а затем через пару секунд перенаправлял?

маршрутизатор

const AppRoute = ({ component, ...routeProps }) => {

  return (
      <Route {...routeProps} render={(props) => {
          return (
              <AppLayout { ...props} {...routeProps}>
                  {React.createElement(component, props)}
              </AppLayout>
          );
      }} />
  );
};

const AppLayout = (props) => {
  return (
          <div>
              {props.navBar ? React.createElement(props.navBar) : null}
              {props.adminNavBar ? React.createElement(props.adminNavBar) : null}
              {props.children}
          </div>
  );
};

class App extends Component {
  constructor(props) {
    super(props);



  }



  render() {
    return (
      <div className="app">
        <BrowserRouter >
          <Switch>


            <AppRoute exact path={routes.LANDING} component={() => <LandingPage />} navBar={Navigation}/>
            <AppRoute exact path={routes.DASHBOARD} component={() => <DashboardPage />}  navBar={Navigation} adminNavBar={AdminNavigation} />
            <AppRoute exact path={routes.LOGIN} component={() => <LoginPage />}/>
            <AppRoute exact path={routes.COMPETITIONS} component={() => <CompetitiondPage />}  navBar={Navigation} />
            <AppRoute exact path={`${routes.COMPETITIONS}/:id`} component={() => <CompetitiondPage />}  navBar={Navigation} adminNavBar={AdminNavigation} />


          </Switch>
        </BrowserRouter>
      </div>
    )
  }
}



export default withAuthentication(App);

Компонент конкурса

class CompetitionPage extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        const {
            authUser
        } = this.props;

        return (
            <div>
                </div>
        )
    }
};



const mapStateToProps = (state) => ({

});


const authCondition = (authUser) => !!authUser;

export default compose(
    withAuthorization(authCondition),
    withCompetition(),
    connect(mapStateToProps)
)(CompetitionPage);

с обработчиком конкуренции

const withCompetition = (condition) => (Component) => {
  class withCompetition extends React.Component {
    componentDidMount() {
      db.doGetUserCompetitionData(1).then(snapshot => {
        if(!snapshot.val()) {
          this.props.history.push(routes.COMPETITIONS);
        }
      }
      );

    }

    render() {
      return <Component {...this.props} />;
    }
  }

  const mapStateToProps = (state) => ({
    competitionData: state.CompetitionState.competitionData
  });

  return compose(
    withRouter,
    connect(mapStateToProps),
  )(withCompetition);
}

export default withCompetition;