[英]react-router-dom useNavigate() hook, id is not getting set in url path
我正在使用 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
有人知道解決方案嗎?
您只是在路徑末尾添加id
值,您應該替換它
let path = PATH_DASHBOARD.general.ViewActivity.replace(':id',id);
您只是將id
值附加到路徑字符串的末尾。
使用generatePath
實用程序將id
值注入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);
};
import { generatePath, useNavigate } from 'react-router-dom'; navigate(generatePath(PATH_DASHBOARD.general.ViewActivity, { id }));
看這里它在文檔中: generatePath
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.