0

我正在尝试遍历一组食物对象并根据其标题为每个对象创建静态页面。这适用于大多数食物，但如果食物标题包含/，则导航到页面（例如“好草莓/猕猴桃甜点”页面）将抛出 404。

在主页中，我在创建Link时对 URL 进行了编码，然后在getStaticPaths函数中，我paths使用相同的编码链接创建了。但是，它在部署时似乎不起作用。

该页面在运行时确实在本地工作npm run dev，但在实际输出构建中似乎存在问题。我可以做些什么来允许带有编码斜杠的路径工作吗？

主页

const HomePage: NextPage = () => (
  <>
    <h1>Home</h1>
    <ul>
      {foods.map((food) => (
        <li key={food.title}>
          <Link href={`/food/${encodeURIComponent(food.title)}`}>
            {food.title}
          </Link>
        </li>
      ))}
    </ul>
  </>
)

食物页面

export const getStaticProps: GetStaticProps<Props, Params> = (ctx) => {
  const title = ctx.params?.foodTitle as string
  const food = foods.find((food) => food.title === title) as Food

  return {
    props: {
      food
    }
  }
}

export const getStaticPaths: GetStaticPaths = () => {
  const paths = foods.map((food) => `/food/${encodeURIComponent(food.title)}`)

  return {
    paths,
    fallback: false
  }
}

const FoodPage: NextPage<Props> = ({ food }) => {
  return (
    <>
      <Link href='/'>Go Back</Link>
      <h1>{food.title}</h1>
      <h2>Amount: {food.amount}</h2>
    </>
  )
}

export default FoodPage
4

2 回答 2

0

Ofc，因为你已经/在路上了。%2F代表的符号/

只需为path编码制作自定义函数并使用它

static stringToParamUrl(input: string) {      
    let url = input.normalize("NFD").toLowerCase().replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z0-9-_]/g, "-")
    return url
  }

修改： “我使用相同的编码链接创建路径。但是，它在部署时似乎不起作用。 ”如果它起作用，那是不正确的。除了包含“/”的链接之外，您的其他链接都可以正常工作。“/”是 URL 的保留字符。在下一个 js 中，它作为“分隔符”工作。

另外（关于Link）：你需要有 <a>标签Link

<Link><a>something</a></Link>

另外（关于后备）：

Fallback不会改变URL 的逻辑。使用后备将在“第一需求”上生成静态页面 - 与 URL 不起作用无关。您在部署期间没有错误，因为您没有创建静态页面（回退错误）

您需要什么： “我正在尝试遍历一组食物对象，并根据其标题为每个对象创建静态页面。” = 您需要在数据库中添加一个名为“URL”或类似名称的字段，并根据 URL *您先前在创建数组时生成的元素而不是名称来迭代元素，因为：

  1. 你需要有“唯一”的 URL（通过 [pid] 参数或其他东西从你的 api 获取数据）
  2. 您需要避免URL 中的保留符号和禁止符号
  3. 最好美化网址。（我和你分享了一个功能）

也许我没有正确理解你的问题

于 2021-10-18T11:09:24.773 回答
0

我在这里发布的示例有点做作，对于我的实际应用程序，我能够通过使用fallback: 'blocking'. 不幸的是，它不再是一个完全可导出的静态网站，但我只有几个页面会遇到这个问题，所以其中一些页面从服务器加载时间会很短。

https://nextjs.org/docs/basic-features/data-fetching

// 我们将在构建时仅预渲染这些路径。// { fallback:blocking } 如果路径不存在，服务器会按需渲染页面。返回{路径，回退：'阻塞'}

于 2021-10-19T06:36:06.453 回答