NextJS URL像React-Router一样

Question

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

目前我们可以用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

对于迟到的任何人，我们现在在 Next 9 中有动态路由。

这将允许通过使用文件结构来制作这样的 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 2

此示例将帮助您定义参数化的命名路径.它使用嵌套/路由,让您定义自定义的首选路径.希望它会对你有所帮助.

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

Answer 3

你可以使用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 })
})

Answer 4

问题：query对象始终为空

TL;DR：在第一次渲染期间，query为空且Router.isReady为false。在接下来的所有渲染调用中，一切都恢复正常。

在最新版本中，完全支持动态路由。该文档甚至展示了一个超级简单的示例来说明其工作原理。遗憾的是，由于某种原因，文档没有提及水分的重要问题。这篇博文解释了一些额外的细节。

要点是：在许多动态渲染场景（包括默认）中，在客户端上的初始渲染期间，页面首先在没有任何参数的情况下渲染（可能是由于水合，基于无法考虑动态路径的静态） 。

解决方案

即使是空的，也允许您的组件“有点工作” router.query，例如：

function MyComp() {
  const router = useRouter();
  const { id } = router.query;

  console.log(`[MyComp render] router.isReady=${router.isReady}, id=${id}`);

  useEffect(() => {
    if (!router.isReady) {
      return;  // NOTE: router.query might be empty during initial render
    }

    doSomethingWithData(id);
  }, [id, router.isReady]);

  if (!router.isReady) {
    // we are still waiting for dynamic data to be available
    return 'loading...';
  }

  return theActualContent;
}

甚至还有一个关键字段告诉您查询数据是否可用，但是由于某种原因，他们在文档Router.isReady中没有提及它。Dynamic Routes

Answer 5

首先导入路由器

import Router from 'next/router'

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

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

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

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