react-router-dom useNavigate() 挂钩，id 未在 url 路径中设置答案

【问题标题】：react-router-dom useNavigate() hook, id is not getting set in url pathreact-router-dom useNavigate() 挂钩，id 未在 url 路径中设置
【发布时间】：2022-12-20 04:04:16
【问题描述】：

我正在使用 react-router-dom v6 进行路由。我想做的是在导航 url 路径中传递 id

以下是我的 onClick 方法和按钮代码

  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>

这是我的 index.js，我正在使用 useRoutes 钩子

    {
      path: "other",
      element: (
        <AuthGuard>
          <DashboardLayout />
        </AuthGuard>
      ),
      children: [
        {
          path: `/my-activities`,
          element: <MyActivities />,
        },
        {
          path: `/my-activities/view-activity/:id`,
          element: ({ id }) => <ViewActivity id={id} />,
        },
      ],
    }

但是当我尝试访问 url 时，浏览器点击了按钮，我得到了这个

http://localhost:3000/other/my-activities/view-activity/:id252515

有人知道解决方案吗？

【问题讨论】：

标签： javascript reactjs navigation react-router-dom

【解决方案1】：

您只是将 id 值附加到路径字符串的末尾。

使用 generatePath 实用程序将 id 值注入 path: "/my-activities/view-activity/:id" 路径字符串。

generatePath

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

...

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

【讨论】：

【解决方案2】：

您只是在路径末尾添加 id 值，您应该替换它

 let path = PATH_DASHBOARD.general.ViewActivity.replace(':id',id);

【讨论】：

【解决方案3】：

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

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

看这里它在文档中：generatePath

【讨论】：