Dynamic routes ReactJS

Here is the component to render routes:

import { useParams } from 'react-router-dom';
function Profile() {
  const { nickname } = useParams();

  return <h1> {nickname} Profile Page</h1>;
}

export default Profile;

Here is routes

import Home from '../pages/Home';
import Following from '../pages/Following';
import Profile from '../pages/Profile';
import Upload from '../pages/Upload';
import Search from '../pages/Search';
import { HeaderOnly } from '../layouts';
////

const publicRoutes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/following',
    component: Following,
  },
  {
    path: '/@:nickname',
    component: Profile,
    layout: HeaderOnly,
  },
  {
    path: '/upload',
    component: Upload,
    layout: HeaderOnly,
  },
  {
    path: '/search',
    component: Search,
    layout: HeaderOnly,
  },
];

const privateRoutes = [];

export { privateRoutes, publicRoutes };

I want my Profile Component to be rendered when accessing /@mynickname. I am using dynamic router and when I try to access /@mynickname, it does not work, but if I access /@:nickname, it works.

How can I access /@mynickname and have my Profile Component rendered? Where did I go wrong?
localhost/@johndee -> johndee Profile Page

This is called url params, you can do it very easily.

Read about this here: https://v5.reactrouter.com/web/example/url-params

@:something won't work in my opinion, try :name and use the value.

it's so easy

 {
    path: '/@:nickname',
    component: Profile,
    layout: HeaderOnly,
  },

To access it, just write /@anythings, if you write something like: /anythings, it won't work.

I think the issue lies with the version of react-router-dom. I'm using the latest version and the developer may have changed the syntax. When I use an older version, the problem is resolved.