问题标签 [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.

0 投票
1 回答
4232 浏览

reactjs - 单击 Next.js 中的链接时如何在 URL 中强制使用默认语言环境

出于 SEO 的目的,我需要将英语设置为默认语言 -> mynextapp.com/当用户进入网站时,他/她可以在 ENGLISH 或 FRENCH 之间进行选择,如果选择英语,则 url 将更改为mynextapp.com/en,如果选择法语 -> mynextapp.com/fr

目前我正在使用 Next - i18n 中的内置选项:

但这使我只能将英语作为默认路径 = mynextapp.com/

语言切换器:

有没有办法在不同的网址下处理相同的语言?这样当您在语言切换器中单击“en”时,url 路径应该是 myapp.com/en。

0 投票
1 回答
1738 浏览

next.js - 如何在 next.js 中创建私有路由?

我想包装我的整个应用程序,以便除非用户登录,否则无法访问它。如果用户未登录,我设法将用户重定向到登录页面,但是,我之前仍然看到私有路由的闪光发生重定向。如何避免这种情况?

0 投票
1 回答
315 浏览

reactjs - Next.js 导航栏:单击来自不同的链接时突出​​显示不清晰

我正在尝试使用 Next.js 突出显示活动链接的导航栏(我也在使用 React-bootstrap,以作记录)。

我尝试遵循指南,以及一些突出显示的作品,而另一些则没有。

我当前的代码

自定义链接.jsx:

导航.jsx:

我的问题:

单击导航栏左侧的任何链接都可以正常工作,这意味着它会突出显示选定的链接清除前一个链接。但这仅在“主页”、“出版物”和“链接”之间循环时才是正确的。

如果我单击右侧的链接(“联系人”)徽标上的链接,则不会清除当前活动的类,例如“出版物”,并且两者(以前活动的和当前选择的)都显示为突出显示。

同样,如果我在“联系人”上,则转到其他组的任何项目都不会清除其突出显示。

如果我刷新页面,链接将恢复为正确突出显示。

我错过了什么?

0 投票
2 回答
1103 浏览

reactjs - 动态路由在使用 Next.js 刷新页面时不起作用

我使用的是 Next.js,但动态路由出现错误。

在我的应用程序中,我使用getStaticPathsgetStaticProps这个:

当我单击此链接时,显示我的页面的动态路由没有问题。

但是当我刷新同一页面时,我会收到以下消息:

在此处输入图像描述

当我寻找解决方案时,答案是Link单击时我的设置不正确。

但是现在我不点击链接,我只是刷新我的页面。

我使用Next.js 10.0.7

0 投票
1 回答
382 浏览

javascript - 如何在 Next.js 中使用查询字符串参数进行路由?

我有一个类似的网址

bar?id=foo

如果我通过router.push('bar?id=foo')一切正常工作。

但是如果我直接进入浏览器中的路由,则查询字符串不会通过。

这输出

0 投票
0 回答
82 浏览

reactjs - React Next JS:如何决定何时获取服务器端和客户端的查询参数?

我是新手NextJS,当我需要query parametersserver-sideor获取 URL 时,有人可以向我解释用例client side吗?还是both

我正在使用ssr(服务器端渲染),因为SEO对我来说很重要,而且我有一个../search?book_name=something&type=etc页面有多个点击时filters会添加query parameters到现有页面url

我应该得到query parameters server side吗?还是client side?还是both

0 投票
0 回答
50 浏览

reactjs - Nextjs 路由器未正确更改页面源

所以基本上我在我的项目中使用 Next.js 并且遇到了一些麻烦。

我在使用 redux 的项目中进行了身份验证。在我的登录页面中有一个 if 条件检查是否isAuthenticated为真(isAuthenticated来自我的 redux 商店)。如果是真的,那么下一个路由器会router.push('/');。这很好,但是当我查看主页的页面源时,它仍然将登录页面显示为源页面。为什么是这样?

我还将我的主页包装在一个管理高阶组件的路由中,该组件检查用户身份验证,也来自 redux,在getInitialProps. 再次路由,一切正常,只是源页面仍然显示登录页面。我是下一个新手,所以我不知道出了什么问题。

这是来自登录页面的重定向。

这是路线管理器。

0 投票
0 回答
324 浏览

reactjs - 以编程方式在 Next.js 应用程序中嵌入 iframe

我正在使用 Next.js 构建一个小型应用程序,使用 AWS Amplify 作为后端来管理用户身份验证、数据存储等。

与此同时,我有一些私人路线,我想在其中嵌入一个Streamlit应用程序,以便我的用户可以与它们进行交互。

一般用例场景是用户登录我的应用程序,然后下拉菜单显示他们拥有的可用应用程序(任务),这意味着一个用户可以拥有多个与其帐户关联的应用程序。

我的问题是,如何根据当前登录的用户和他选择的任务部署和以编程方式启动不同的应用程序?

理想情况下,这些应用程序必须只能由指定且经过身份验证的用户访问。此外,我想找到一种在用户从下拉菜单中选择特定任务时启动应用程序的方法。

到目前为止,我有一个包含所有任务的表和一个代表该任务所有者的用户 ID,因此,显示一个包含与该特定用户相关的所有任务的下拉菜单非常简单。此外,我知道我可以使用 Next.js 路由器以基于路径以编程方式显示内容。

但是,我不确定嵌入与用户相关的 Streamlit 应用程序以便用户可以“玩”它的最佳方法是什么。

我知道有很多方法可以实现这一点,但是,我不知道如何思考这样的系统。

0 投票
1 回答
1395 浏览

next.js - useRouter - 查询对象为空

我正在尝试在 Next.JS 中学习路由,但无法获取查询对象。

文件路径:./src/pages/[test]/index.tsx

console.log只是打印{}

0 投票
1 回答
188 浏览

reactjs - 如何监听路由器的变化并强制类组件重新渲染?

使用框架 Next.js 和类组件,我试图获取实际查询以更新 DOM。我正在使用路由器,next/router但它返回前一个,而不是实际的 url。这是一个例子:

当用户第一次访问包含表单的页面时,会出现:

  • 路线:/signup?option=signup
  • 呈现的表单:登录

如果用户单击next/Link指向 /signup?option=login 的链接,则会出现:

  • 路线:/signup?option=login
  • 呈现的表单:登录

因此,以此为例,我想知道如何监听路由器并在这种情况发生变化时强制虚拟 DOM 再次运行。

这是我获取路由器并将其传递给类组件的方式:

提前感谢您的时间和答案!