Tengo un problema con el enrutador-dom. Estoy trabajando de acuerdo con el tutorial de YouTube, no puedo resolver el siguiente error: [landingPageLayout] no es un componente. Todos los elementos secundarios de deben ser a o <React.Fragment>. Yo sería greateful para alguna orientación.
índice.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById('root') );Aplicación.js
import './App.css'; import { Routes, Route } from 'react-router-dom'; import landingPageLayout from './components/layouts/landingPageLayout'; import homePage from './components/pages/homePage'; const App = () => { return ( <Routes> <landingPageLayout> <Route path="/"> <homePage/> </Route> </landingPageLayout> </Routes> ); }landingPageLayout.js
import React from 'react'; import Header from '../navigation/header'; const landingPageLayout = ({...otherProps}) => { return ( <div> <Header/> </div> ) } export default landingPageLayout;Como dijo Nicholas en los comentarios, sus componentes de reacción siempre deben estar en mayúscula.
Aparte de eso, el componente Rutas solo acepta o <React.Fragment> como hijos, por lo que no puede agregar su diseño de esa manera. Lo que puedes hacer es algo como esto:
const App = () => { return ( <Routes> <Route path='/*' element={ <LandingPageLayout> <HomePage /> </LandingPageLayout> } /> </Routes> ); } Si tiene varias rutas que necesitan este diseño, debe reemplazar HomePage con otro componente que tenga todas las rutas. Por ejemplo, podemos llamarlo PrivateRoutes. Luego, en el código anterior, reemplaza <HomePage /> con <PrivateRoutes /> y luego su componente PrivateRoutes debería verse así:
const PrivateRoutes = () => { return ( <Routes> <Route path="home" element={<HomePage />} /> <Route path="page1" element={<Page1 /> /> //rest of routes </Routes> ); }