我是NextJS的新手,第一印象看起来很棒。 但是在给它机会之后我遇到了一些问题,例如使用react-router这样的自定义参数进行URL路由。
https://url.com/users?id:123
https://url.com/users/123
在react-router中这里有一个完美的例子https://reacttraining.com/react-router/web/example/url-params
答案 0 :(得分:10)
此示例将帮助您定义参数化的命名路径。它使用嵌套/路由,让您定义自定义的首选路径。 希望它会对你有所帮助。
https://github.com/zeit/next.js/tree/master/examples/with-next-routes
答案 1 :(得分:6)
您可以使用next/link
的{{1}}功能:
as
浏览器上的链接显示为<Link prefetch as={`/product/${slug}`} href={`/product?slug=${slug}`}>
,内部映射到/product/slug
您需要custom server进行服务器端映射:
/product?slug=slug
答案 2 :(得分:6)
对于迟到该聚会的任何人,我们现在在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
答案 3 :(得分:2)
第一个导入路由器
import Router from 'next/router'
然后,如果您想在链接标记中使用它
<Link href={{ pathname: '/about', query: { name: 'Sajad' } }}>
如果要在函数中或回调后使用它
Router.push({
pathname: '/about',
query: { name: 'Sajad' },
})
答案 4 :(得分:1)
我曾经遇到过同样的问题,但是我发现了这个包裹, https://github.com/fridays/next-routes
它的工作原理与react-router几乎相同,我已经尝试过了,并且对我有用。