مشکل گرفتن پارامتر URL داخل React

درود از چه ورژنی از react-router-dom دارید استفاده میکنید ترجیحا ورژن ۶باشه
اینم یه نمونه کد برای پیاده کردن چنین چیزی

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ShowString from './ShowString';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/@:string" element={<ShowString />} />
        {/* سایر روت ها */}
      </Routes>
    </Router>
  );
}

export default App;

سلام مجدد حسام جان ، مرسی از راهنماییت
بخوام بگم ، کد من ساده شدش اینه

ایندکس :

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes,Route } from 'react-router-dom';
import Home from "./pages/home.js";
import Layout from "./pages/layout.js";
import ShowString from "./pages/showstring.js";
import AboutMe from './pages/aboutme.js';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<Home />} />
          <Route path='about-me' element={<AboutMe />} />
          <Route path='*' element={<Home />} />
        </Route>
        <Route path='/@:string' element={<ShowString />} />
      </Routes>
    </BrowserRouter>
  );
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />)

عکس بالا کلا Layout و حالت عادی صفحه اصلیه

این عکس بالا هم یکی از صفحاته که Layout رعایت شده فقط کانتنت صفحه عوض میشه

اما مشکل من دقیق اینجاست

اینجا وقتی روت localhost:3000/@hello رو میزنم Layout با حالت صفحه عادی رو لود میکنه و اصلا اون روت رو فراخوانی نمیکنه

const ShowString = () => {

    console.log(2);

    return (
      <>
      <h2>Wow! , @ Route!</h2>

      </>
    );
  };

  export default ShowString;

اینم کد ساده صفحه ShowString که فقط ثابت کنه بارگذاری شده ، یه لاگ تو کنسول بده که اونم نمیده

نسخه react-router-dom هم 6.24.1 هستش

@hesammousavi