Почему не отображаются компоненты React?

Question

[Дмитрий Юмшанов]

Пробую свои силы в изучении react. Хочу создать простой темплейт из компонентов бутстрапа, однако при компиляции реакт не видит компоненты.

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;

p.s. Navbar react видит, а вот компонент home уже нет. Кода нет даже в консоли, хотя по содержанию они идентичны.

Comments

[Kentavr16]

что значит не видит компоненты?

[szQocks]

чё за 2 часа лень было подсказать ему, народ... ?

<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 />} />

[Дмитрий Юмшанов]

szQocks да, спасибо большое!

Answer 1

[Дмитрий Юмшанов]

Оказалось устаревший код использовал.

В Layout.js надо добавить Outlet

import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar'

const Layout = () => {
    return (
      <div>
        <Navbar />
        <main>
          <Outlet />
        </main>
      </div>
    );
  };
export default Layout

и в App.js

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>
    );
  };
export default App;

Cпасибо szQocks и буржуям со StackOverflow