Functions are not valid as a React child when wraping Routes in App-CodePudding

I'm trying to wrap Routes using Layout component so it puts all content into a bootstrap 12 column grid.But it doesnt wrap my text inside Route components and I get a warning that functions are not valid as a React child. Here is the App.js code:

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;

And here is the code for Layout.js:

import  Container  from 'react-bootstrap/Container';

export const Layout = (props) => {
  return( 
  <Container>
      {props.children}
  </Container>
  )
};
export default Layout  ```

CodePudding user response：

As you can see in the docs, you have to provide the elements like this (ReactElement):

<Route path='/' element={<Home />} />
<Route path='/fahrzeugangebote/' element={<Offers />} />
// etc