在呈现页面之前检查服务器中是否存在url参数

我正在创建一个应用程序,其中有一个URL参数,比如 /competition/:id .当用户访问此URL时,我想在呈现之前检查比赛的id是否确实存在。到目前为止,当我直接访问它时,它会呈现 Navigation 和 AdminNavigation 然后过了一秒钟,它会重定向到 /competition (因为我在URL中插入的id不存在)。我能做些什么来获得更好的用户体验,使其不显示页面,然后在几秒钟后重定向?

路由器

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;