Estoy usando react-router-dom v6 para fines de enrutamiento. Lo que estoy tratando de hacer es pasar la identificación en la ruta de navegación de la URL
El siguiente es mi método onClick y el código del botón
let navigate = useNavigate(); const routeChange = (id) => { let path = `${PATH_DASHBOARD.general.ViewActivity}` + id; navigate(path); }; --------------------------------------------------------------------------- <Button type="submit" variant="contained" sx={{ width: "100%", marginTop: 3, }} onClick={() => routeChange(item.id) } > <Typography variant="body2" align="center"> View </Typography> </Button>Aquí está mi index.js, estoy usando el enlace useRoutes
{ path: "other", element: ( <AuthGuard> <DashboardLayout /> </AuthGuard> ), children: [ { path: `/my-activities`, element: <MyActivities />, }, { path: `/my-activities/view-activity/:id`, element: ({ id }) => <ViewActivity id={id} />, }, ], }Pero cuando trato de acceder a la URL, el navegador está haciendo clic en el botón, obtengo esto
http://localhost:3000/other/my-activities/view-activity/:id252515¿Alguien sabe la solución?
Solo está agregando un valor de id al final de su cadena de ruta.
Utilice la utilidad generatePath para inyectar el valor de id en la path: "/my-activities/view-activity/:id" .
import { generatePath, useNavigate } from 'react-router-dom';...
const navigate = useNavigate(); const routeChange = (id) => { const path = generatePath(PATH_DASHBOARD.general.ViewActivity, { id }); navigate(path); };Solo está agregando valor de id al final de su ruta, debe reemplazarlo
let path = PATH_DASHBOARD.general.ViewActivity.replace(':id',id);