En mi aplicación, tengo una llamada API que obtiene algunos datos (matriz de objetos), luego uso esto en un contexto y lo comparto en mi aplicación. Lo que quiero hacer es usar algunos de esos datos, es decir, el valor del objeto y prefijarlo en mis rutas. El manejo de la API se realiza a través de react-query.
He intentado simplemente acceder a la variable e insertarla de la siguiente manera:
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> </> ) }Entonces, el problema es que esto es inconsistente, ya que a veces la url regresa como '/ indefinido / inicio' y muestra el componente 404 no encontrado, entonces creo que la ruta se inserta antes de que finalice la respuesta.
¿Algunas ideas?
Sí, parece que en el ciclo de renderizado inicial basePrefix o valueFromContext?.name produce un valor indefinido. Puede aplicar alguna lógica de representación condicional para devolver un indicador null o de carga mientras se recupera/calcula el valor basePrefix .
Ejemplo:
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 } En su pregunta estrechamente relacionada aquí, observe que proporcioné un valor de baseprefix definido válido del contexto por este motivo, para no inyectar accidentalmente undefined en la ruta de la URL.