почему страница dialogs не сохраняется при переходе по другому url адресу?

При нажатии, допустим, на "Dimych" сам url меняется из ../dialogs на ../dialogs/1. По идеи, страница Dialogs должна так же отображаться, но по не понятной причине исчезает.

Родительский компонент:

import React from 'react';
import './App.css';
import Header from './components/Header/Header';
import Navbar from './components/Navbar/Navbar';

import Profile from './components/Profile/Profile';
import Dialogs from './components/Dialogs/Dialogs';
import { BrowserRouter, Route, Routes } from 'react-router-dom';


const App = () => {
  return (
      <div className='app-wrapper'>
        <BrowserRouter>
          <Header />
          <Navbar />

          <div className='app-wrapper-content'>
            <Routes>
              <Route path='/dialogs' element={<Dialogs />}/>
              <Route path='/profile' element={<Profile />}/>
            </Routes>
  
          </div>
            
        </BrowserRouter>
        
      </div>);
}

export default App;

Сама страница Dialogs:

import React from "react";
import s from './Dialogs.module.css';
import { Link, NavLink } from "react-router-dom";

const Dialogs = (props) => {
    return (
        <div className={s.dialogs}>
            <div className={s.dialogsItems}>
                <div className={s.dialog + ' ' + s.active}>
                    <NavLink to="/dialogs/1">Dimych</NavLink>
                </div>

                <div className={s.dialog}>
                    <Link to="/dialogs/2">Bob</Link>
                </div>
              
                <div className={s.dialog}>
                    <Link to="/dialogs/3">Krit</Link>
                </div>

                <div className={s.dialog}>
                    <Link to="/dialogs/4">Veronika</Link>
                </div>
                
                <div className={s.dialog}>
                    <Link to="/dialogs/5">Valeriy</Link>
                </div>

            </div>

            <div className={s.messages}>
                <div className={s.message}>Hi</div>
                <div className={s.message}>How are you?</div>
                <div className={s.message}>Yo</div>
            </div>
        </div>
    );
}

export default Dialogs```