Otros componentes Route son los únicos hijos válidos de un componente de Route . Este es el caso de uso de la construcción de rutas anidadas. Para contenido/componentes enrutados, estos deben usar el element prop.

Renderice el componente Layout como el element del componente Route .

Ejemplo:

 <Routes> <Route path='/' element={( <Layout> <Home /> </Layout> )} /> </Routes>

También es común que los componentes de diseño representen un Outlet para rutas anidadas.

Ejemplo:

 const Layout = () => ( <> <Header /> <Outlet /> <Footer /> </> );

...

 <Routes> <Route element={<Layout />}> <Route path='/' element={<Home />} /> </Route> </Routes>

Simplemente puede extraer el componente <Home/> desde allí y proporcionar el diseño como un accesorio para la ruta como este

 <Route component={Layout} />

Y proporcione su componente de inicio dentro del componente de Diseño en sí mismo