CODEWITHSUNDEEP
javascriptreactjsnavigationreact-router-dom
Saran Ahmed
Saran Ahmed

Reputation: 45

react-router-dom useNavigate() hook, id is not getting set in url path

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?

Upvotes: 1

Views: 4593

Answers (3)

Lucia Aldana
Lucia Aldana

Reputation: 784

import { generatePath, useNavigate } from 'react-router-dom';

navigate(generatePath(PATH_DASHBOARD.general.ViewActivity, { id }));

Look here it is in the documentation: generatePath

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 203466

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.

generatePath

import { generatePath, useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();
const routeChange = (id) => {
  const path = generatePath(PATH_DASHBOARD.general.ViewActivity, { id });
  navigate(path);
};

Upvotes: 1

Wraithy
Wraithy

Reputation: 2056

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);

Upvotes: 0

Related Questions