I keep getting an annoying console.log(router.ts:11 No routes matched location "/user/root") for example.

My application for now is incredibly simple. If a user is logged in, i return these routes available.

return (
  <Routes>
   <Route path={`/user/:username`} element={<User/>}/>
  </Routes>
)

The <User/> component simply returns either "your account" , or "other account" depending on what the route username the user types in the browser is.

const User = () => {
    const username = useParams().username
    if (username === 'root'){
        return <h1>your account</h1>
    }
    return (
        <h1>other user</h1>
    )
}

The functionality works, and it displays correctly depending on the route typed in. However the No routes matched location "/user/root" console.log is driving me nuts. What am I doing wrong?

This is my App.js if needed for context

function App() {
  const user = useSelector(state => state.user)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  // Checks if local storage saved user
  useEffect(() => {
    const loggedUserJSON = window.localStorage.getItem('loggedUser')
    if (loggedUserJSON) {
      const user= JSON.parse(loggedUserJSON)
      dispatch(loginUser(user))
    }
  }, [])

  const handleLogout = () => {
    dispatch(logoutUser())
  }

  // If no user in storage or store, display and redirect to login
  if (!user) {
    return (
      <Routes> 
        <Route path="/login" element={<Login/>}/>
        <Route path="/" element={<Home/>}/>
      </Routes>
    );
  }
 
  // If user found in store or local storage, send to their account profile
  return (
    <>
    <p>{user.user.username} signed in <button onClick={handleLogout}>logout</button></p>
    <Routes>
      <Route exact path={`/user/:username`} element={<User/>}/>
      <Route path={`/store`} element={<Home/>}/>
    </Routes>
    </>  
  )
}