Sigo recibiendo un molesto console.log(router.ts:11 No routes matched location "/user/root") por ejemplo.

Mi aplicación por ahora es increíblemente simple. Si un usuario ha iniciado sesión, devuelvo estas rutas disponibles.

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

El componente <User/> simplemente devuelve "su cuenta" u "otra cuenta" según el nombre de usuario de la ruta que el usuario escriba en el navegador.

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

La funcionalidad funciona y se muestra correctamente dependiendo de la ruta ingresada. Sin embargo, el archivo console.log No routes matched location "/user/root" me está volviendo loco. ¿Qué estoy haciendo mal?

Esta es mi App.js si es necesario para el contexto

 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> </> ) }