Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema de renderizado de rutas fuera de component app

Estas en el tema de Problema de renderizado de rutas fuera de component app en el foro de Frameworks JS en Foros del Web. Tengo la siguiente estructura en react js: src --> components (Folder) Container.js Content.js Footer.js Header.js List.js --> pages (Folder) About.js Home.js Login.js New.js App.js routes.js ...
  #1 (permalink)  
Antiguo 01/07/2020, 21:36
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 10 años, 3 meses
Puntos: 1
Problema de renderizado de rutas fuera de component app

Tengo la siguiente estructura en react js:

src
--> components (Folder)
Container.js
Content.js
Footer.js
Header.js
List.js
--> pages (Folder)
About.js
Home.js
Login.js
New.js
App.js
routes.js

Componente App.js:
Código:
function App() {
      return (
        <div>
          <BrowserRouter>
            <Switch>
              <Route path="/login" component={Login} />
              <Route path="/container" component={Container} />
              <Redirect from="/" to="/login" />
            </Switch>
          </BrowserRouter>
        </div>
      );
    }
    export default App;
Componente Container.js:

Código:
export const Container = () => {
        return(
            <div>
                <Header />
                <hr/>
                <Content />
                <hr/>
                <Footer />
            </div>
        );
    }
routes.js:

Código:
mport React from 'react';
    
    const Home = React.lazy(() => import('./pages/Home'));
    const News = React.lazy(() => import('./pages/News'));
    const About = React.lazy(() => import('./pages/About'));
    
    const routes = [
        {
            path:'/home',
            component: Home
        },
        {
            path:'/news',
            component: News,
        },
        {
            path:'/about',
            component: About,
        },
    ];
    
    export default routes;
Component List.js:

Código:
export const List = () => {
        return(
            <div>
                <Link to="/home">Home</Link> |
                <Link to="/news">News</Link> |
                <Link to="/about">About</Link>
            </div>
        );
    }
Component Content.js:

Código:
import routes from '../routes';
    
    const Content = () => {
        return(
            <div>
                <br/>
                <List />
                <br />
                <Switch>
                {
                    routes.map((route, index) => (
                        <Route
                         key={index}
                         path={route.path}
                         component={route.component}
                        />
                    ))
                }
                </Switch>
            </div>
        );
    }
    
    export default Content;
Necesito renderizar las rutas que estan en Content.js, pero las rutas no se muestran.



La zona horaria es GMT -6. Ahora son las 19:39.