next.js - 具有动态 id 和查询参数的 next-i18next 翻译

Question

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

这是我用于编辑页面的 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,
  };
};