【问题标题】:How to Create Dynamic Routes in Next.js [duplicate]如何在 Next.js 中创建动态路由 [重复]
【发布时间】:2022-11-12 10:21:43
【问题描述】:

如何通过快速的 URL 检查为我的路由增加灵活性?

我想要一个产品详情页面的地址,一部分是静态的,一部分是动态的:

www.shop.com/product-{productid}-{productname}

像 :

www.shop.com/product-1-applewatch

www.shop.com/product-9-maclaptap

在 next.js 中这可能吗?

感谢您阅读问题。

我也发现了这个,但它并没有解决我的问题: https://www.makeuseof.com/nextjs-dynamic-routes-create/

【问题讨论】:

  • 不,我需要像 [product-id-productname] 这样的 url 将“/”替换为“-”
  • 这是可行的,但我不知道这是否是做动态路由的好方法。首先,您使用的是 Next.js 13 还是 12.x.x?
  • 我正在使用 12.x.x 我希望我的网址像 [product-id-productname] 将“/”替换为“-”
  • 您打算将 getStaticPropsgetStaticPathsgetServerSideProps 一起使用吗?

标签: next.js url-routing


【解决方案1】:

按照您的要求,您可以生成一些网址,如下所示:

  • www.shop.com/product/1/applewatch
  • www.shop.com/product/1?productName=applewatch 或者www.shop.com/product?productId=1&productName=applewatch

参考: https://nextjs.org/docs/routing/dynamic-routes

【讨论】:

  • 我想要我的 url ==>product-1-apple watch 而不是这个 ==>product/1/apple watch 没有查询字符串
猜你喜欢
  • 1970-01-01
  • 2022-11-12
  • 2022-07-29
  • 2022-01-04
  • 2021-06-18
  • 1970-01-01
  • 2022-11-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多