I am using react-router-dom v6 for routing purpose. What I am trying to do is passing id in navigate url path
Following is my onClick method and button code
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>
Here is my index.js, I am using useRoutes hook
{
path: "other",
element: (
<AuthGuard>
<DashboardLayout />
</AuthGuard>
),
children: [
{
path: `/my-activities`,
element: <MyActivities />,
},
{
path: `/my-activities/view-activity/:id`,
element: ({ id }) => <ViewActivity id={id} />,
},
],
}
But when I try to access url is the browser on button click, I am getting this
http://localhost:3000/other/my-activities/view-activity/:id252515
Anyone knows the solution?
You are only appending an id value to the end of your path string.
Use the generatePath utility to inject the id value into the path: "/my-activities/view-activity/:id" path string.
import { generatePath, useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
const routeChange = (id) => {
const path = generatePath(PATH_DASHBOARD.general.ViewActivity, { id });
navigate(path);
};
You are just adding id value at the end of your path, you should replace it
let path = PATH_DASHBOARD.general.ViewActivity.replace(':id',id);