I am using react-router-dom and react-router-bootstrap to handle routing in my react-typescript-react-bootstrap web app and I am getting the following error:
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
The project isn't throwing any errors but the routing is not responding. Here's the index and components:
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')
);
SiteNav.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;
home.tsx
class Home extends Component {
render() {
return (
<div className="Home">
<body>home</body>
</div>
)
}
}
export default Home;
about.tsx
class About extends Component {
render() {
return (
<div className="About">
<body>About</body>
</div>
)
}
}
export default About;
What am I missing?
edit---- updated with the following but still getting the same error
const About = () => {
<div className="About">
<body>About</body>
</div>
}
export default About
const Home = () => {
<div className="Home">
<body>home</body>
</div>
}
export default Home;