Estoy escribiendo rutas con el enrutador de reacción:
<Route path="/" element={<Homepage />} />Tengo una matriz con los nombres de los elementos:
const page = ["Hompage", "About"];¿Cómo puedo usar el elemento de matriz como un elemento de ruta?
Intenté agregar cadenas de paréntesis angulares y usar el elemento de matriz, pero no funcionó.
const edit = () => { for (let i=0; i<10; i++) { page[i]="<"+page[i]+" />" }Gracias
Deberá importar los componentes reales que desea representar en algún momento y luego asignar la matriz a JSX.
Ejemplo:
import HomePage from '../path/to/HomePage'; import About from '../path/to/About'; const pageMap = { HomePage, About }; ... const pages = ["Hompage", "About"]; ... const edit = () => { return pages.map(Page => <Page key={Page} />); }; ... Si desea asignar las pages a los componentes de la Route , sería un proceso similar.
const pageMap = { HomePage: { path: "/", element: <HomePage /> }, About: { path: "/about", element: <About /> }, }; const pages = ["Hompage", "About"]; ... pages.map(({ path, element }) => ( <Route key={path} path={path} element={element} /> )) Sin embargo, en este punto, también puede usar el gancho useRoutes y pasarle la configuración de sus rutas.
Ejemplo:
import { useRoutes } from 'react-router-dom'; import HomePage from '../path/to/HomePage'; import About from '../path/to/About'; ... const routesConfig = [ { path: "/", element: <HomePage /> }, { path: "/about", element: <About /> } ]; ... const routes = useRoutes(routesConfig); ... return routes;Deberías poder hacer algo como esto:
import Home from '../Home' import About from '../About' const Routes = () => { const pages = [{ route: '/', page: Home }, { route: '/about', page: About }] return ( <Switch> {pages.map(({route, page: Page }) => ( <Route path={route} element={<Page />} /> )} </Switch> ) } La clave aquí es usar el componente importado como valor para la clave de su page y luego puede usar la sintaxis del componente JSX normal mientras itera con el map