0
180
Vistas¿Cómo agregar más de un componente de salida reaccionar enrutador dom V6?
Estoy usando react-router-dom V6 y me gustaría saber si es posible agregar más de un componente Outlet al mismo tiempo porque quiero tener una sección reemplazable y un pie de página.
Esto es lo que intenté
<Route path = "/" element={<AppToolBar/>} > <Route path = "/AboutMe" element={<AboutMe />}> <Route path="/AboutMe" element={<AboutMeIntro />} /> <Route path="/AboutMe" element={<Footer />} /> </Route> </Route>Pero no funciona, ya que no identifica una diferencia entre ellos, por lo que simplemente representará dos veces el primero en lugar de representar el primero y el segundo. Algunas ideas ? Tal vez estoy ignorando algo importante
Así es como se renderiza
ACTUALIZAR
La respuesta definitivamente funcionó.
<Route path = "/" element={<AppToolBar/>} > <Route path="/AboutMe" element={( <> <AboutMe /> <Footer /> </> )} > <Route path="/AboutMe" element={<AboutMeIntro />} /> </Route> </Route> 
1 Respuestas
Responde la pregunta0
Si entiendo su pregunta correctamente, desea mostrar una página acerca de con niños condicionales e incondicionalmente ( o condicionalmente pero separado de la ruta/ruta ) un pie de página.
Suponiendo que AppToolBar representa un Outlet para las rutas secundarias "/" anidadas, continúe con la abstracción haciendo que la ruta "/AboutMe" represente un Outlet para sus rutas secundarias anidadas. Renderice el pie de Footer con el componente envolvente AboutMe .
<Route path="/" element={<AppToolBar/>} > <Route path="/AboutMe" element={( <> <AboutMe /> <Footer /> </> )} > <Route path="/AboutMe" element={<AboutMeIntro />} /> </Route> </Route> Si desea renderizar condicionalmente el pie de Footer , entonces renderice condicionalmente.
Ejemplo:
<Route path="/" element={<AppToolBar/>} > <Route path="/AboutMe" element={( <> <AboutMe /> {condition && <Footer />} </> )} > <Route path="/AboutMe" element={<AboutMeIntro />} /> </Route> </Route>Podría limpiar esto un poco abstrayendo el JSX en un nuevo componente contenedor:
const AboutMeWrapper = () => ( <> <AboutMe /> {condition && <Footer />} </> );...
<Route path="/" element={<AppToolBar/>} > <Route path="/AboutMe" element={<AboutMeWrapper />} > <Route path="/AboutMe" element={<AboutMeIntro />} /> </Route> </Route> O abstraiga el pie de página en el componente AboutMe .
Ejemplo:
const AboutMe = () => { // business logic return ( <> <div /* AboutMe layout styling */ > ... <Outlet /> ... </div> {condition && <Footer />} </> ); };...
<Route path="/" element={<AppToolBar/>} > <Route path="/AboutMe" element={<AboutMe />} > <Route path="/AboutMe" element={<AboutMeIntro />} /> </Route> </Route>