问题标签 [next-router]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
next.js - 客户端路由在动态路径路由之间不起作用
我不知道为什么它不起作用。
当我调用通过 URL 导航router.push({ pathname: '/user/a' })
转到/pages/user/[userId].tsx
It 路由时。
但是我要通过客户端router.push({ pathname: '/user/b' })
去It路由。/pages/user/b.tsx
我需要你的帮助。
谢谢你。
reactjs - 如何使用 Next Js useRouter 在不刷新到下一页的情况下更改 url?
我正在使用 Next.js,我想知道如何在不刷新的情况下更改同一页面上的 url。我正在使用 shallow=true 但它仍然呈现到下一页。
这是我的代码:
这是逻辑但不起作用
我已经测试了 router.push 它不起作用并且 windows 替换状态是一个坏主意。选项卡将如下所示。
如果您单击样本考试,它将显示与考试相同的样本详细信息,但它必须在同一页面上。
谢谢。
javascript - Next.js router.push 对查询参数进行编码
我正在尝试使用router.push
传递查询字符串进行重定向,但是当我尝试在参数中传递带有特殊字符的值时,逗号正在对我的 URL 进行编码。是否可以使用 ',' 到 URL 中router.push
?
我已经尝试了很多东西,但我不知道如何让它发挥作用。
生成的 URL 将是myurl?pets=cats%2Cdogs
,我希望它是myurl?pets=cats,dogs
。
reactjs - 在 Next.js 网站中打开一个页面作为叠加层
我有一个可以搜索的网站。我希望用户能够单击搜索结果并在叠加层中打开产品而不是重新加载整个页面,但是我希望 url 栏中的 url 是正确的产品页面,以便用户复制并粘贴它或在新选项卡中打开它,他们将获得产品页面。我还希望后退按钮在这两种情况下都可以使用。
这是该过程的更详细说明。
- 用户导航到 /list?keywords=widget 的列表页面
- 用户点击产品
- 产品的内容在叠加层上动画,但列表页面没有卸载,它仍然在产品页面下方
- URL 栏更新以反映用户在 /products/123 上,但实际上并未加载产品页面。
- 如果用户点击后退按钮,则覆盖消失。
- 如果用户在覆盖打开时点击刷新按钮,他们将获得产品页面的 ssr 版本,下面的列表页面不再存在。
起初我以为我可以使用 Next/Router 上的 {shallow:true} 选项来使其工作,但文档特别指出这仅适用于同一页面导航(使用不同的查询字符串)。
我唯一的想法是,我可以将链接设置为正确的,但在浏览器中劫持它以在历史状态下以纯 javascript 执行某些操作,但我不确定是否可以从等式中删除下一个路由器。
为了清楚起见,我不是在寻求产品页面或覆盖本身的帮助,我可以轻松地创建在两种情况下显示相同内容的共享组件,特别是我请求帮助的路由和 URL 问题。
任何帮助,即使只是指向正确方向的指针,也将不胜感激。
reactjs - NextJS router.push 奇怪的链接
当我尝试在登录后重定向到主页(或在尝试访问没有令牌的页面后重定向到登录)时,这个 url 变得很奇怪。
我怎样才能防止这种情况并在 url 中有一个正常的路径?
reactjs - 使用 Next.js 和 React Js 的动态路由
我正在 React/Next Js 中创建一个电子商务应用程序。我想为产品详细信息页面和类别页面创建具有不同参数的动态路由。
例如,如果我点击类别,那么它的路线将是
https://www.mywebsite.com/my-category-page-url
如果我点击该类别中的任何产品,那么它的路线将是
https://www.mywebsite.com/my-product-detail-page-url
注意:我已经有一个实时网站,每天有 30K 访问者和不同的技术堆栈,它们遵循相同的 url 结构,所以我无法更改 url 结构。
reactjs - NEXT JS - 如何删除查询参数
如何在不刷新 Next JS (React) 中的页面的情况下删除或更新查询参数?
- 用户在 URL 上
/about?login=success&something=yes
- 单击一个按钮并
?login=success&something=yes
从 URL 中删除而不刷新页面。单击按钮后的 URL 将是/about
我怎样才能实现它?
正如这个线程中提到的,我知道可以使用路由器删除查询参数或查询字符串。但是,useLocation
和useHistory
上不可用next/router
。
reactjs - Next.js 路由器创建查询字符串和查询字符串数组
我在我的项目中使用 Next.js,我需要创建一个动态查询字符串。我使用这段代码:
它有效,但我不发送数组来查询字符串。我怎样才能做到这一点?另外,有没有更简单的方法在 Next.js 中创建查询字符串?
reactjs - NextJs 中单页的多条路由
我正在为我的公司建立一个营销/消费者网站,从 WordPress(感谢上帝)迁移到 Next 和 Prismic 的组合。目前,我们的消费者网站有大约 600 个页面来为我们 35 多个经销商中的每一个提供多个产品和登录页面,但我想不再管理 600 个页面的内容,因为所有经销商都共享页面和内容;页面数量的唯一作用是允许我们增强 SEO 和 url 路径,以便每个产品页面都是经销商的子页面,即san-diego-ca/product-page
sacramento-ca/product-page
. 希望这是足够的信息来澄清我更广泛的问题。
我正在使用SSR
and getServerSideProps
,并且我希望能够拥有相同类型的 URL 结构,每个经销商都有自己的具有特定 url 路径的页面,但他们不需要拥有自己的页面内容。它们都共享相同的东西。我在 Prismic 中有一个名为/interior-doors
. 使用 Next 有没有一种方法可以允许/interior-doors
访问该页面,mysite.com/interior-doors
而mysite.com/sacramento-ca/interior-doors
无需拥有 2 个单独的页面?
在此先感谢,我可以根据需要添加尽可能多的代码或详细信息。