在 App 中包装路由时，函数作为 React 子项无效

Question

我正在尝试使用 Layout 组件包装 Routes，以便将所有内容放入 bootstrap 12 列 grid.But 它不会将我的文本包装在 Route 组件中，我收到一条警告，指出函数是作为 React 子项无效。这是 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;

这里是 Layout.js 的代码：

import  Container  from 'react-bootstrap/Container';

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

Answer 1

如您在 docs 中所见，您必须提供如下元素 (ReactElement):

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

在 App 中包装路由时，函数作为 React 子项无效

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

javascript

css

reactjs

bootstrap-4