next.js - 如何在 url 中的动态路由 Nextjs 的名称之间添加破折号（-）

Question

我创建了一条动态路线pages/post/[postname].tsx。当我将名称发送到动态路由时，url 会显示带有 url-encode (%20,%E2,...) 的名称，我想在单词之间用破折号显示 url 的名称。像下面的网址

https://stackoverflow.com/questions/68041539/using-dash-in-the-dynamic-route-name-in-nuxt-js

我怎样才能做到这一点？

Answer 1

我之前使用过 getStaticPaths 方法并将其传递给一个 slugs 对象。在处理无头 CMS 时，这对我有用。

export async function getStaticPaths() {
  // Hit API to get posts as JSON
  const posts = await getPosts()

  // Map a new object with just the slugs
  const paths = posts.map((post) => {
    return { params: { slug: post.slug } }
  })

// Return paths 
  return {
    paths: paths,
    fallback: true
  }
}

Answer 2

我想我理解这个问题，您正在尝试使用一组带空格的字符串，例如“开始 Web 开发的基础知识”作为路径参数来实现类似https://www.genishawlah.xyz/the-fundamentals- of-starting-web-development。这很可能会将您的空间转换%20为正常的空间。我会建议您首先使用replace()方法将所有空格更改为连字符，然后再将其作为参数传递，但该replace()方法仅更改第一个空格并保留其余空格。还有其他方法可以以编程方式消除空格，但可能会带来压力且不值得，因此我建议您默认使用带连字符的字符串集。

如果没有，请尝试使用 for 循环replace()将所有空格更改为连字符，然后将其作为参数传递。