Estoy usando react: 17.0.2 y react-router-dom: 6.3.0 .
Mi fragmento App.js actual se ve así:
class App extends React.Component { render() { return ( <div className="App"> <Routes> <Route element={<Layout/>}> <Route path="/home" element={<Home/>} /> <Route path="/login" element={<Login/>} /> <Route path="/signup" element={<Signup/>} /> </Route> <Route exact path='/' element={<Intro/>}/> </Routes> </div> ); } } La ruta a '/' no debe usar el componente Layout , por lo que debo excluirlo del contexto.
Dentro Layout.js necesito acceder a los children así:
const Layout = ({ children }) => { console.log(children) return ( <div> <main>{children}</main> </div> ); }; Pero children no están undefined en el ejemplo anterior. Puedo acceder a los children en Layout.js cuando reescribo App.js en el siguiente fragmento, pero luego '/' también se representa con el diseño.
class App extends React.Component { render() { return ( <div className="App"> <Layout> <Routes> <Route path="/home" element={<Home/>} /> <Route path="/login" element={<Login/>} /> <Route path="/signup" element={<Signup/>} /> <Route exact path='/' element={<Intro/>}/> </Routes> </Layout> </div> ); } } export default App; ¿Cómo puedo acceder a los children en Layout.js y renderizar la ruta '/' sin el diseño?
Route y Routes funcionan un poco diferente en v6. Los componentes Route y React.Fragment son los únicos elementos secundarios válidos del componente Routes , y otros componentes Route son los únicos elementos secundarios válidos de Route . Las rutas de diseño deben representar un componente Outlet para que las rutas anidadas representen su contenido.
import { Outlet } from 'react-router-dom'; const Layout = () => { return ( <div> <main> <Outlet /> </main> </div> ); };