NextJS URL 类似 React-Router 的参数

Question

我是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

Answer 1

此示例将帮助您定义参数化的命名路由。它使用 nest/routes 并让您定义您的自定义偏好路线。希望对你有帮助。

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

Answer 2

对于旧版本：< 9.x

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

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

Link 在浏览器上将显示为 /product/slug，在内部映射到 /product?slug=slug

您需要 custom server 用于 server-side 映射：

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

9.x 及以上

接下来9.x支持file system based dynamic routing。您不再需要自定义服务器。

Next.js 支持使用基本命名参数创建路由，这是一种由 path-to-regexp（为 Express 提供支持的库）推广的模式。

创建与路由 /product/:slug 匹配的页面现在可以通过在您的页面目录中创建一个名为：pages/product/[slug].js.

的文件来实现

还支持多个动态 URL 细分！

./pages/blog/[blogId]/comments/[commentId].js
./pages/posts/[pid]/index.js

Answer 3

我也遇到过同样的问题，但我找到了这个包， https://github.com/fridays/next-routes

效果和react-router几乎一样，我试过了，对我有用。

Answer 4

对于迟到的任何人，我们现在在 Next 9 中有 dynamic routing。

这将允许 url 结构像这样通过使用文件结构而无需额外的包来制作。

您可以创建一个文件pages/user/[id].js

与

import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>User: {id}</p>
}

export default User

Answer 5

首先导入路由器

import Router from 'next/router'

那么如果你想在 Link 标签中使用它

<Link href={{ pathname: '/about', query: { name: 'Sajad' } }}>

如果你想在函数中或回调后使用它

Router.push({
    pathname: '/about',
    query: { name: 'Sajad' },
  })

NextJS URL 类似 React-Router 的参数

NextJS URL params like React-Router

reactjs

react-router

next.js

目前我们可以用 NextJS 做什么

为了更好的 URL 模式我们需要什么

对于旧版本：< 9.x

9.x 及以上