Estoy tratando de renderizar mis páginas usando un bucle en lugar de escribir cada una de ellas por separado. Hice esta matriz para almacenar la información de mis páginas.
const pages = [ { title: "Translate", url: "/translate", component: TranslatePage }, { title: "Study", url: "/study", component: StudyPage }, { title: "About", url: "/about", component: AboutPage }, { title: "Home", url: "/", component: HomePage }, { title: "Terms", url: "/study/terms", component: TermsPage }, ];Para cada página, necesito renderizarla en este formato:
<Route path="/study" exact element={ <StudyPage getDocuments={getDocuments} collectionRef={collectionRef} docs={docs} /> } />¿Cómo puedo representar cada página usando currentPage.component para escribir la parte del elemento del componente Route? Para cada componente en mi matriz de páginas, necesito obtener
element={<ComponentReadFromPagesArray getDocuments={getDocuments} collectionRef={collectionRef} docs={docs} />}pero no sé cómo extraer el componente de la matriz y luego pasarlo al elemento como su propio componente con accesorios
Si entiendo bien tu pregunta, sería así:
const routes = pages.map(({component: Page, url: path}) => { const element = (<Page {...{collectionRef, docs, getDocuments}} />); return (<Route {...{element, exact: true, path}} />); });