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.