Primera publicación, ten piedad.
La función de mapa no devuelve ningún error, pero las categorías que intento mapear no se cargan. console.log: devuelve las rutas respectivas en el formato deseado, por ejemplo. "/todos" ; "/ropa" y "/tecnología". Intenté deshacerme de console.log, return (), cambiando "" a '', reiniciando el servidor sin resultado.
El elemento CategoryPage se carga cuando se carga desde /Categories, por lo que el enrutamiento "codificado" funciona. Todas las demás rutas también funcionan bien.
También traté de poner todo el bit del mapa fuera de renderizar y consola. Regístrelo para ver si hace algo y sí, devolvió un montón de datos en un formato extraño, pero eso es (creo) debido a JSX.
Resultado deseado: cargar CategoryPage al acceder a /all, /ropa y /tech con los accesorios apropiados transmitidos.
Realmente aprecio tu tiempo tratando de ayudarme <3
render() { const pathArr = Object.entries(this.props.categories); console.log(pathArr); return ( <ApolloProvider client={client}> <Router> <div className="App"> <NavBar /> <div className="content"> <Switch> {pathArr.map((elem) => { return ( ( <Route key={elem} exact path={`"/${elem[1].name}"`} > <CategoryPage category={elem[1].name} /> </Route> ) && console.log(`"/${elem[1].name}"`) ); })} <Route path="/Categories"> <CategoryPage /> </Route> <Route exact path="/cart"> <Cart /> </Route> <Route exact path="/product/:id" component={PDP} /> </Switch> </div> </div> </Router> </ApolloProvider> ); }Parece que el problema es que la asignación de la matriz pathArr devuelve una expresión booleana y es el resultado del operando final que es el valor asignado. En otras palabras, está regresando efectivamente JSX && console.log(some value) . Dado que JSX es verdadero y la condición es un AND lógico ( && ), la expresión continúa procesándose y se invoca console.log(`"/${elem[1].name}"`) . console.log es un retorno nulo, es decir, devuelve undefined .
No debe invocar efectos secundarios no intencionales en el método de render . Por lo general, debe usar uno de los métodos del ciclo de vida del componente, es decir, componentDidUpdate , para generar efectos secundarios.
En aras de responder a su pregunta, supondré que solo está iniciando sesión con "propósitos de depuración"; puede mover el archivo console.log para que se llame antes del valor de retorno asignado.
También querrá calcular las rutas de ruta correctas, path={`"/${elem[1].name}"`} inyectará comillas literales en el valor de la ruta, es decir, '"/someName"' cuando realmente solo quiera '/someName' para la ruta. Utilice path={`/${elem[1].name}`} en su lugar.
Ejemplo:
render() { const pathArr = Object.values(this.props.categories); // array of values console.log(pathArr); return ( <ApolloProvider client={client}> <Router> <div className="App"> <NavBar /> <div className="content"> <Switch> {pathArr.map((elem) => { console.log(`/${elem.name}`); // log here return ( // then return JSX <Route key={elem} exact path={`/${elem.name}`} > <CategoryPage category={elem.name} /> </Route> ); }} <Route path="/Categories"> <CategoryPage /> </Route> <Route exact path="/cart"> <Cart /> </Route> <Route exact path="/product/:id" component={PDP} /> </Switch> </div> </div> </Router> </ApolloProvider> ); }