问题标签 [next-router]

我有一条动态路线：

当用户单击指向/test/1Next.js 的链接时，最终会按预期呈现正确的页面。

当我想/test/1用其他任何东西掩盖 url 时，有趣的事情就开始了。

<Link href="/test/1" as="/any/thing/here">

据我了解，上面的代码应该：

• 将用户移动到 test/1 并渲染 test/[id].js，
• 在 domain.com/any/thing/here 后面隐藏 domain.com/test/1 url。

发生的情况是它根本不指向 test/[id].js，只是返回 404。

带有损坏代码的沙盒链接：

https://codesandbox.io/s/nervous-silence-z62s1?file=/pages/index.js

我在这里做错了什么？我有一个非常长且复杂的网址，其中包含很多斜杠，我必须与 Next.js 动态路由一起使用，除了使用“as”之外，我没有看到任何其他解决方案......我很确定我曾经使用过几年前，它刚刚奏效！似乎它也适用于这个人：Linking to dynamic routes in Next.js

如果 Next.js 改变了一些东西，那么我如何轻松地重新创建这个功能？

我正在 Next.js 中构建电子商务 Web 应用程序，但我被困在产品过滤上。假设有 3 个可能的过滤选项：

1. 按类别 - 屈光度 / 太阳镜
2. 按性别 - 男性/女性
3. 按品牌 - rayban / gucci

现在，过滤器应该作为子页面工作。假设用户选择了男士太阳镜，那么 URL 应如下所示：/sunglasses/men。现在，我的网站上有 4 个可能的示例 URL：

1. /太阳镜/男士
2. /太阳镜/雷朋
3. /太阳镜/男士/雷朋
4. /太阳镜/雷朋/男士

我无法弄清楚路由器应该如何区分前两个 URL，并弄清楚第一个 URL 中的第二个参数是性别过滤器，但第二个 URL 中的第二个参数是品牌过滤器。

我正在使用 Next.js 及其服务器端渲染 (getServerSideProps)。

感谢您的任何帮助。

router.push(url) 重新渲染页面，但是如何使用 router.push(url,as) 方法重新渲染页面。页面呈现，但它通过先前的状态并且不能调用使用效果。谁能帮忙？？

我在我的应用程序中使用 NextJS。在那，对于路由，我们使用以下内容：

这甚至是文档建议遵循的。他们利用 useRouter 钩子来接入路由器实例并用它做一些事情。

我一直在使用上述方法的替代方法。有一个单例路由器实例，它是 next/router 文件的默认导出。它允许我在不使用钩子进入路由器实例的情况下进行路由。

我更喜欢第二种方法。但是，我在 NextJs 网站上没有看到这方面的文档。不确定这是否是进行路由的正确方法。我想知道这两种方法之间有什么区别，第二种方法将来会导致任何问题。

我正在建立一个 Next.JS 站点并想检索站点 url。例如，如果我有本地安装，那么站点 url 将是localhost:3000. 如果我部署该站点，那么它将是www.my-domainame.com.

我想我可以通过 next.jsuseRouter钩子来做到这一点。但仔细观察，它似乎并没有返回该信息。它包含有关路径和查询的信息，但没有有关站点 url 的信息。

因此，我想知道——如何在 Next.JS 中做到这一点？

谢谢。

我想根据 next.js 中的不同查询参数显示具有不同状态的页面，这样当用户使用带有查询参数的链接时，它不应该显示默认页面，而是基于状态。

为简单起见，考虑主页，因为 localhost:3000 这会呈现一些默认文本“Hello user”如果用户输入localhost:3000/?name=JohnDoe 这应该呈现 Hello JohnDoe。

我尝试过的事情。我可以通过 next router 使用事件处理程序添加查询参数。 router.push('/?name=JohnDoe) 但是我不知道当用户使用带有查询参数的链接直接进入页面时设置状态的解决方案

我的项目中有多个getServerSideProps，我有一个显示页面的标题，一旦我点击它，我必须等待页面打开，因为我需要获取数据。获取它们后，页面将打开。

我用来向用户显示加载状态的一种方法是使用，routeChangeStart但我偶然发现了一个问题，所以我不想使用这种情况。

如果我进入一个页面并且正在获取数据，我想向用户显示一个微调器或一些指示器，并且一旦获取了数据，我想停止指示器/微调器。

我有一个简单的表单，其中包含我无法输入的输入字段。我首先认为问题出在将输入设置为只读onChange的道具或value道具上，但事实是我无法输入浏览器建议并且状态更新完美（参见此处的 gif）只是我不会让我用键盘输入，即使在重新加载页面后。

我还有一个运行良好的登录页面，除了当我注销并重定向回该页面时，它在我重新加载页面之前不会工作，现在它可以工作了。

奇怪的是它处于只读状态，但是当我使用浏览器建议时，它可以工作并更新状态。

这是整个组件：

我在 next.js 中遇到路由问题。服务器上的项目位于子目录中：exmaple.com/app。

我想实现的路由：（example.com/app/<locale>/<pageName> 在url前添加前缀）。当我尝试将其添加到 href 时，会以Link这种方式生成 url：example.com/<locale>/app/<pageName>

有没有办法在前缀之后添加语言环境，而不是相反？当我使用 basePath 时，它会在 example.com/app/app 中为我的应用程序提供服务，因为项目位于 /app 子目录中

用于包装链接的自定义链接组件：

我真的在为获得故事书而奋斗，和 nextjs 路由器一起玩。我收到以下错误：

NextContext.Provider 未定义，请将其添加到 parameters.nextRouter.Provider

我已经设置了一个 nextjs + 故事书项目。现在我有一个使用useRouter. 我遵循了官方指南。这是我的main.js文件：

这是我的preview.js文件：

当我预览故事书并导航到我的组件时，出现错误：

我不知道我还应该做什么。谢谢你的建议。