Не работают переходы на страницы

import React from 'react'
import './App.css';
import Profile from './components/profile/Profile';
import Footer from './components/footer/Footer';
import Header from './components/header/Header';
import Nav from './components/nav/Nav';
import About from './components/about/About';
import Main from './components/main/Main';
import NotFound from './components/not_found/Not_found';
 
import {Routes,Route} from 'react-router-dom';
 
  const App = () => {
    return (
        <Routes>
            <div className="app-wrapper">
                <Header/>
                <div className='main-div'>
                    <Nav/>
                    <div className='content'>
                    <Route path="/about" element={<About />} />
                    <Route path="/" element={<Main />} />
                    <Route path="/not_found" element={<NotFound />} />
                        
 
                    </div>
                </div>
                <Footer/>
            </div>
        </Routes>
    );
}
 
 
export default App;

import React from 'react'
import cl from'./Nav.module.css';
import {Link} from 'react-router-dom';
 
 
const Nav = () => {
    return(
            <div className={cl.nav}>
                <div><Link to='/about' className={cl.item}>О ресурсе</Link></div>
                <div><Link to='/' className={cl.item}>Главная</Link ></div>
                <div><Link to='/find_sleep' className={cl.item}>Найти сон</Link></div>
                <div><Link to='/chat' className={cl.item}>Чат</Link></div>
                <div><Link to='/dream_book' className={cl.item}>Сонник</Link></div>
                <div><Link to='/connect' className={cl.item}>Связь</Link></div>
 
            </div>
    );
}
 
export default Nav;

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';
 
 
 
ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();