javascript Next.js - encodeURIComponent不能与“getStaticPaths”中的“/”一起使用

dhxwm5r4 于 2022-12-25 发布在 Java

关注(0)|答案(3)|浏览(151)

最小生殖部位：https://nextjs-paths-issue.vercel.app/
最小重现代码：https://github.com/saadq/nextjs-encoding-issue
Home page
Food page

我尝试迭代一个food对象数组，并根据每个food对象的标题为每个food对象创建静态页面，这对大多数food都有效，但如果food标题包含/，则导航到该页面（如the "Nice strawberry/kiwis dessert" page）将抛出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

JavaScript

来源：https://stackoverflow.com/questions/69609567/next-js-encodeuricomponent-doesnt-work-with-in-getstaticpaths

3条答案

按热度按时间

w9apscun1#

我在这里发布的例子有点做作，对于我的实际应用程序来说，我可以通过使用fallback: 'blocking'来让它工作。不幸的是，它不再是一个完全可导出的静态网站了，但我只有几个页面会遇到这个问题，所以其中一些页面从服务器加载时会有一点时间。
https://nextjs.org/docs/basic-features/data-fetching
//我们将在构建时仅预呈现这些路径。// { fallback：如果路径不存在，blocking }将按需服务器呈现页面//。return { paths，fallback：“阻塞”}

赞(0）回复(0）举报 2022-12-25

px9o7tmv2#

因为路径中有/。%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><a>something</a></Link>

另外（关于回退）：
回退不会更改URL的逻辑。使用回退将在"第一次请求"时生成静态页-与URL不起作用无关。由于未创建静态页，因此在部署期间未出现错误（回退为false）
您需要：* "我正在尝试遍历一个食物对象数组，并根据每个食物对象的标题为每个食物对象创建静态页面。"*=您需要在数据库中添加一个名为"URL"或类似的字段，并根据URL *（您之前在创建数组时生成）而不是名称来迭代元素，因为：
1.你需要有一个"唯一的" URL（通过[pid]参数或其他方式从你的api中获取数据）
1.您需要在URL中使用avoid reserved and forbidden符号
1.最好美化网址。（我和你分享了一个函数）
也许我没有正确理解你的问题

赞(0）回复(0）举报 2022-12-25

qxsslcnc3#

一个老线索，但我花了很多时间寻找一个解决方案，所以我想分享。
为了在getStaticPath中获取格式为/categories/page的链接，同时在/category/和/category/page/中使用相同的组件，但使用不同的参数，您应该使用页面格式[... category]. js。这允许您在getStaticPath中以数组形式传递参数：

params: {
    category: [category, page],
}

结果，它将生成页面类别/页面，并仍然有回退：false。尝试将“/”直接添加到路径（如您所做的那样）将创建html页面category%2fpage.html。
More details about static paths以及关于捕获所有路线

赞(0）回复(0）举报 2022-12-25

我来回答

javascript Next.js - encodeURIComponent不能与“getStaticPaths”中的“/”一起使用

3条答案

相关问题

热门标签

最新问答