像React-Router这样的NextJS URL参数

reactjs React.js

斯丁达蒙

2020-03-20

我是NextJS的新手，第一印象看起来非常好。但是在给了机会之后，我遇到了一些问题，例如带有自定义参数的URL路由，例如react-router。

目前，我们可以使用NextJS做些什么

https://url.com/users?id:123

我们需要什么才能获得更好的URL模式

https://url.com/users/123

在react-router中在这里有一个完美的例子https://reacttraining.com/react-router/web/example/url-params

第2535篇《像React-Router这样的NextJS URL参数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
ProGil 2020.03.20

您可以使用next/link的as功能：

<Link prefetch as={`/product/${slug}`} href={`/product?slug=${slug}`}>

浏览器上的链接将显示为/product/slug内部映射到的链接/product?slug=slug

您需要具有用于服务器端映射的自定义服务器：

server.get("/product/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})
古一 2020.03.20

我曾经遇到过同样的问题，但是我发现了这个包， https://github.com/fridays/next-routes

它的工作原理几乎与react-router相同，我已经尝试过了，并且对我有用。

Gil 2020.03.20

本示例将帮助您定义参数化的命名路由。它使用嵌套/路由，并让您定义自定义的首选路由。希望对您有帮助。

https://github.com/zeit/next.js/tree/master/examples/with-next-routes

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android