Estoy tratando de envolver rutas usando el componente de diseño para que coloque todo el contenido en una cuadrícula de 12 columnas de arranque. Pero no envuelve mi texto dentro de los componentes de ruta y recibo una advertencia de que las funciones no son válidas como un niño de React. Aquí está el código App.js:

 import './App.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Home from './Home'; import Offers from './Offers'; import Financing from './Financing'; import Buying from './Buying'; import Contact from './Contact'; import Gallery from './Gallery'; import Search from './Search'; import Layout from './components/Layout'; function App() { return ( <Fragment> <Layout> <Router> <Routes> <Route path='/' element={Home} /> <Route path='/fahrzeugangebote/' element={Offers} /> <Route path='/finanzierung/' element={Financing} /> <Route path='/fahrzeugankauf/' element={Buying} /> <Route path='/galerie/' element={Gallery} /> <Route path='/kontakt/' element={Contact} /> <Route element={Search} /> </Routes> </Router> </Layout> </Fragment> ); } export default App;

Y aquí está el código para Layout.js:

 import Container from 'react-bootstrap/Container'; export const Layout = (props) => { return( <Container> {props.children} </Container> ) }; export default Layout ```