NextJS URL像React-Router一样

时间:2017-04-03 09:57:05

标签: reactjs react-router next.js

我是NextJS的新手,第一印象看起来很棒。 但是在给它机会之后我遇到了一些问题,例如使用react-router这样的自定义参数进行URL路由。

目前我们可以用NextJS

做什么
https://url.com/users?id:123

我们需要具备更好的网址格式

https://url.com/users/123

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

5 个答案:

答案 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几乎相同,我已经尝试过了,并且对我有用。