Para mí, depende de la acción que estoy tratando de hacer.

Si quiero una ruta única con alguna información dinámica, como la identificación del chat, que no quiero que se almacene en la URL, prefiero establecerla en el estado de historial.

Pero, para las acciones REST (editar/agregar y demás), prefiero encadenar la id en la propia URL. Tiene algunos beneficios. El principal que veo es que puede copiar la URL, pegarla en otro lugar (computadora/navegador diferente) y aún accederá a la misma página con los detalles sobre la id que encadenó.

Esto depende de lo que prefieras y de lo que necesite tu proyecto. La diferencia entre los dos es la siguiente:

1. navigate('/edit', { state : {id :user.id} }) no escribirá la id en la url . Y lo consumes con la ayuda del gancho useLocation , de esta manera:

 import { useLocation } from "react-router-dom"; function Edit() { const { state } = useLocation(); return ( <div> {state.id} </div> ); } export default Edit;

Es más flexible, ya que puede o no pasar la id . Por ejemplo, puede pasarlo cuando navega desde la página de inicio de login , pero no en otros casos.

2. navigate('/edit/${user.id}') significaría que ha definido un slug mientras configuraba su ruta, así:

 <Route path = "/edit/:id" element= {<Edit/>}/>

Y lo consumes esta vez con el gancho useParmas :

 import { useParams } from "react-router-dom"; function Edit() { const { id } = useParams(); return ( <div> {id} </div> ); } export default Edit;

En el último caso, la id debe estar allí, todo el tiempo, para hacer una path correcta.