0
234
Viewsel mapeo no funciona dentro del componente Routes de react-router-dom
en lugar de escribir todo manualmente, solo quiero representar mis rutas como una matriz.
export const routes = [ { path: "/", component: Home, layout: NonAuthLayout, }, { path: "/about", component: About, layout: NonAuthLayout, }, ];y en mi archivo app.js, hice algo como esto:
<BrowserRouter> <Routes> {routes.map((route, index) => { const Component = route.component; const Layout = route.layout || Fragment; return ( <Route key={index} path={route.path} element={ <Layout> <Component /> </Layout> } /> ); })} </Routes> </BrowserRouter>Pero está dando error, mientras intentaba ejecutarlo.
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. at Routes (http://localhost:3000/static/js/bundle.js:57985:5) at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:12771:70) at ThemeProvider (http://localhost:3000/static/js/bundle.js:12462:5) at ThemeProvider (http://localhost:3000/static/js/bundle.js:12791:5) at Router (http://localhost:3000/static/js/bundle.js:57918:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:56727:5) at App at SettingProvider (http://localhost:3000/static/js/bundle.js:174:5)pero pero, si pongo así funciona:
<Ruta ruta="/" elemento={} />
actualización: imagen de diseño sin autenticación 
Creo que cometí un error tonto. ¿alguien puede corregirme aquí?
2 answers
Answer question0
Creo que está tratando de representar componentes usando un nombre de componente dinámico como en esta solución:
Nombre del componente dinámico React/JSX
No funciona porque cuando haces const Component = route.component solo obtienes la cadena (por ejemplo, "Inicio" o "Acerca de")
Su variable debe contener una referencia al componente en sí , no solo el nombre del componente como una cadena
Por lo tanto, almacene sus componentes en una matriz y reprodúzcalos utilizando el nombre de la variable dinámica devuelto por route.component
Algo del estilo de:
import HomeComponent from './components/home' import AboutComponent from './components/about' const components = { home: HomeComponent, about: AboutComponent } const Component = components[route.component];Es un poco de trabajo dar la solución correcta sin ver más de su código, pero el concepto (y su error) es bastante fundamental, por lo que es mejor que consulte la publicación que vinculé anteriormente y los documentos oficiales de React aquí para entiende mejor esto:
https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime
0
No veo ningún problema manifiesto con su código y, de hecho, parece funcionar sin problemas.
Sospecho que puede tener un problema de exportación/importación de componentes con uno o más de los componentes Home , About y NonAuthLayout , así que verifíquelos dos veces.
Pero, hay una manera más simple
No reinventar la rueda. react-router-dom exporta un useRoutes que efectivamente hace esto.
Vuelva a configurar la configuración de sus rutas para cumplir con la sintaxis RRD:
export const routes = [ { element: <NonAuthLayout />, children: [ { path: "/", element: <Home />, }, { path: "/about", element: <About />, }, ], }, ];NonAuthLayout
NonAuthLayout ahora es una ruta de diseño y necesita representar un Outlet en lugar de un accesorio para children .
import { Outlet } from 'react-router-dom'; const NonAuthLayout = () => ( <Box> <div> <TopBar /> </div> <Box> <Outlet /> </Box> </Box> );aplicación
import { BrowserRouter, useRoutes } from 'react-router-dom'; import { routes } from '../path/to/routes'; ... const element = useRoutes(routes); ... <BrowserRouter> {element} </BrowserRouter>