Why is routing not working?

Question

React

I'm learning React and ran into a routing problem on the site. For some reason it just refuses to work. There is an About.jsx file:

import React from 'react';

const About = () => {
    return (
        <h1>
            Это приложение создано в качестве обучения
        </h1>
    );
};

export default About;

And there is an App.js file where the routing is done directly:

import About from "./pages/About";
function App() {
    return (
        <BrowserRouter>
            <Route path="/about">
                <About/>
            </Route>
        </BrowserRouter>
    )
}

export default App;

At the output I get nothing, an empty sheet. What could be the problem?

Answer 1

<Route path="/about" element={< About />} />

Answer 2

Friends, thank you all! Solved the problem like this:

import React from "react";
import './styles/App.css'
import {BrowserRouter, Route, Router, Routes} from "react-router-dom";
import About from "./pages/About";
import Posts from "./pages/Posts";


function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/about" element={<About />} />
                <Route path="/posts" element={<Posts />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;