我正在使用react-router-dom和react-router-bootstrap来处理我的react typescript react bootstrap web应用程序中的路由，我收到以下错误：
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
Routes@http://localhost:3000/static/js/bundle.js:60069:7
Router@http://localhost:3000/static/js/bundle.js:60006:7
该项目没有引发任何错误，但路由没有响应。以下是索引和组件：
index.tsx
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<SiteNav />
<Routes>
<Route path="/home" element={Home} />
<Route path="/about" element={About} />
</Routes>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
站点导航.tsx
class SiteNav extends Component {
render() {
return (
<div className="Nav">
<Navbar bg="light" expand="lg">
<Container>
<LinkContainer to="/home">
<Navbar.Brand>The Pirate Hostel</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<LinkContainer to="/home">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/about">
<Nav.Link>About</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
)
}
}
export default SiteNav;
主页.tsx
class Home extends Component {
render() {
return (
<div className="Home">
<body>home</body>
</div>
)
}
}
export default Home;
关于.tsx
class About extends Component {
render() {
return (
<div className="About">
<body>About</body>
</div>
)
}
}
export default About;
我错过了什么？
edit----更新了以下内容，但仍然得到相同的错误
const About = () => {
<div className="About">
<body>About</body>
</div>
}
export default About
const Home = () => {
<div className="Home">
<body>home</body>
</div>
}
export default Home;
在react-router-dom@6中，Route组件的API发生了一些变化。element道具采用ReactNode，即JSX，而不是对组件的引用。
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>