Soy nuevo en React.js y tengo un problema al enrutar los componentes. Tengo 2 blogs diferentes y ambos blogs tienen encabezado y pie de página diferentes. ¿Cuál es la mejor manera de representar diferentes encabezados y pies de página para ciertas páginas como Artículo y Pantalla de inicio? Intenté hacer diseños separados y usar Enrutamiento en esos diseños y luego lo usé en mi App.js pero no funciona
He hecho las siguientes cosas pero nada funciona para mí:
Mi archivo Simple_Blog.js es:
class Simple_Blog extends Component { render() { return ( <> <SimpleHeader /> <Routes> <Route exact path="/" element={<LaunchScreen/>}/> <Route exact path="/article1" element={<Article1/>}/> </Routes> <SimpleFooter /> </> ); } } export default Simple_BlogMi archivo Mega_Blog.js es:
class Mega_Blog extends Component { render() { return ( <> <MegaHeader /> <Routes> <Route exact path="/mega" element={<Index/>}/> <Route exact path="/mega/series" element={<Home/>}/> <Route exact path="/mega/article-whats-new" element={<Article_New/>}/> </Routes> <MegaFooter /> </> ); } } export default Mega_BlogMi archivo App.js en el que he usado estos dos diseños basados en diferentes rutas:
class App extends Component { render() { return ( <> <Router > <Routes> <Route exact path="/" element={ <Simple_Blog />} /> <Route exact path="/mega" element={ <Mega_Blog/> } > </Routes> </Router> </> ); } } export default App¿Puede alguien encontrar algún error en él o decirme alguna otra forma de hacer esto?
Haz esto en tu App.js:
<Router> <Routes> <Route path="/mega" element={<Mega_Blog/>}> <Route path="/series" element={<Home/>}/> <Route path="/article-whats-new" element={<Article_New/>}/> <Route path="/" element={<Index/>}> </Route> <Route path="/simple" element={<Simple_Blog/>}> <Route path="/article1" element={<Article1/>}/> <Route path="/" element={<LaunchScreen/>}/> </Route> </Routes> </Router> Y luego modifique sus componentes Mega_Blog y Simple_Blog para que solo contengan el encabezado, el pie de página y una etiqueta <Outlet/> (para el contenido de la página, por ejemplo, Article1 o LaunchScreen). Por ejemplo:
<> <MegaHeader /> <Outlet /> <MegaFooter /> </>En su componente de encabezado, use useLocation de react-router-dom. Luego, dependiendo de la ruta, puede representar un encabezado diferente
use useLocation en el componente de encabezado y obtenga la ruta actual y, en la base de la ruta, cambie su encabezado y pie de página.
import { useLocation } from "react-router-dom"; let location = useLocation(); console.log(location)