Why aren't React components displayed? [duplicate] - reactjs

Question

This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed 19 hours ago.
I'm trying my hand at studying react. I want to create a simple template from bootstrap components, but react doesn't see the components when compiling.
app.js
import React from "react";
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';
function App() {
return(
<Router>
<Layout>
<Routes>
<Route exact path='/' component={Home} />
<Route exact path='/blog' component={Blog} />
<Route exact path='/blog/:id' component={BlogDetail} />
<Route exact path='/category/:id' component={Category} />
</Routes>
</Layout>
</Router>
);
};
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Home.js
import React from "react";
function Home(){
return(
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
);
};
export default Home;
import Navbar from '../components/Navbar'
const Layout = (props) =>(
<div>
<Navbar />
{props.children}
</div>
);
export default Layout
p.s. Navbar react sees, but the home component does not. There is no code even in the console, although they are identical in content.
Each route should show the layout navbar and load the component that is called by the route. Layout and Navbar are seen by the reactor, but everything else is not even reflected in the browser console.

Answer 1

You can upgrade to v6 and use an Outlet component in your Layout to do what you want using react-router-dom.
The Outlet allows nested UI to show up when child routes are rendered.
import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar'
const Layout = () => {
return (
<div>
<Navbar />
<main>
<Outlet />
</main>
</div>
);
};
export default Layout;
Also, your App component would need to be refactored like this:
function App() {
return(
<Router>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path='blog' element={<Blog />} />
<Route path='blog/:id' element={<BlogDetail />} />
<Route path='category/:id' element={<Category />} />
</Route>
</Routes>
</Router>
);
};