React-Query / React Router V5 insérer une variable d'état de la réponse api dans la route mais seulement quand la réponse est terminée

Question

Dans mon application, j'ai un appel api qui obtient des données (tableau d'objets), je les utilise ensuite dans un contexte et je les partage dans mon application. Ce que je veux faire, c'est utiliser certaines de ces données, c'est-à-dire la valeur de l'objet, et les préfixer dans mes routes. La gestion de l'API est effectuée via react-query.

J'ai essayé d'accéder à la variable et de l'insérer comme suit :

const Routing: React.FunctionComponent = () => {
  const { valueFromContext } = React.useContext(DataContext);

  const basePrefix = valueFromContext?.name;

  return (
    <>
        <BrowserRouter >
          <Header />
          <div className="App">
            <Switch>
              <Route exact path={["/", "/dashboard"]}>
                <Redirect to={`/${basePrefix}/home`} />
              </Route>
              <Route exact path={[`/${basePrefix}/home`, "/"]} component={Home} />
              <Route exact path={`/account/:id`} render={(props: RouteComponentProps<any>) => <Account {...props} />} />
              <Route component={NotFound} />
            </Switch>
          </div>
        </BrowserRouter>
    </>
  )
}

Le problème est que c'est incohérent, car parfois l'url revient comme '/undefined/home' et affiche le composant 404 not found, donc je pense que la route est insérée avant que la réponse ne soit terminée ?

Une idée ?

Answer 1

Oui, il semble que sur le cycle de rendu initial que basePrefix ou valueFromContext?.name donne une valeur indéfinie. Vous pouvez appliquer une logique de rendu conditionnel pour retourner null ou un indicateur de chargement pendant que le basePrefix est récupérée/calculée.

Exemple :

const Routing: React.FunctionComponent = () => {
  const { valueFromContext } = React.useContext(DataContext);

  const basePrefix = valueFromContext?.name;

  return basePrefix
    ? (
      <BrowserRouter >
        <Header />
        <div className="App">
          <Switch>
            <Route exact path={["/", "/dashboard"]}>
              <Redirect to={`/${basePrefix}/home`} />
            </Route>
            <Route exact path={[`/${basePrefix}/home`, "/"]} component={Home} />
            <Route exact path={`/account/:id`} render={(props: RouteComponentProps<any>) => <Account {...props} />} />
            <Route component={NotFound} />
          </Switch>
        </div>
      </BrowserRouter>
    )
    : null; // <-- or loading indicator/spinner/etc
}

Dans votre étroitement liés question aquí avis que j'ai fourni un défini baseprefix du contexte pour cette raison, afin de ne pas injecter accidentellement des undefined dans le chemin de l'URL.