Question

我有这个页面，我在表格中显示数据，每行都有一个编辑按钮，可以让我编辑表单，我可以在其中编辑数据。但是，当前显示的页面路径类似于 http://localhost:3000/sales-orders/edit/f8ce0230-8bcd-4b4a-a258-08fe87d26085?name=。名称值应该显示在那里，但它没有显示出来，我猜这是错误使用 getStaticPaths 的问题。但是，我不确定如何向 name 内的路径数组的 id 提供 params 和 getStaticPaths 的动态值，我需要这方面的帮助。 Here 是我为实现此目的而遵循的链接。

这是我用于编辑页面的 index.js 文件代码

const SalesOrderEditPage: NextPage = () => {
  const { t } = useTranslation('editSalesOrders');
  const router = useRouter();
  const id = router.query.id as string;
  const name = router.query.name as string;

  const breadcrumbs: BreadcrumbItemDataInterface[] = useMemo(
    () => [
      { name: t('portal'), href: '/' },
      { name: t('orders'), href: '/sales-orders' },
      { name: `${t('order')} #${name?.slice(-6)}`, href: `/sales-orders/edit/${id}` },
    ],
    [id, name],
  );

  return (
    <MainLayout title={`Order #${name?.slice(-6)}`}>
      <Breadcrumb breadcrumbsData={breadcrumbs} className="mb-6" />

      <SalesOrdersEditView />
    </MainLayout>
  );
};

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common', 'editSalesOrders'])),
  },
});

export const getStaticPaths = () => {
  return {
    paths: ['/sales-orders/edit/[id]', { params: {name: '', id: ''}}],
    fallback: true,
  };
};

带有动态 ID 和查询参数的 next-i18next 翻译

0 个答案: