问题标签 [next-router]

我的 Next.JS 应用程序 (404.js) 中有一个自定义 404 页面。在页面上，我想显示一条消息The route <strong>/not-a-route</strong> does not exist，但是当使用 Next.jsuseRouter()和router.pathname时，路由器认为我打开了/404，而是显示The route <strong>/404</strong> does not exist. 如何访问我在自定义 404 页面中的实际路线？

请参阅下面的编辑。

我在我的项目中遇到了重置密码问题。我可以向用户发送一封电子邮件，其中包含用于重置密码的链接，其中包含哈希令牌和用户的 ID。

99% 的代码已经完成（后端和前端），唯一的问题是我无法在客户端获取哈希令牌和 id 以调用正确的 API 端点，因此向用户显示用于重置密码的表单，并具有检查令牌、到期日期等的逻辑。

我没有使用react-router-dom（即使我尝试仅将它用于这条路线并且我无法使其正常工作）。

基本上我发送给用户的链接是这个：

我的路线如下所示：

现在，我尝试将这样的 react-router-dom 功能添加到页面文件夹内的 reset-password-form.js 文件中，如下所示：

而且，问题是我无法调用正确的 API 端点，因为我无法获得所需的参数。组件看起来像这样（它只是几行代码，而不是整个组件）：

所以现在如果我点击链接，我会得到一个找不到 404 页面。

如何在客户端获取这些参数？

编辑：

所以现在我next/router按照建议使用。

首先，我注意到如果令牌被/内部散列，next/router则无法读取令牌，它会给我一个 404 页面（可能是因为它认为有超过 2 个参数？）。我试图在/没有成功的情况下调整路线。

出于调试目的，我reset-password-form/[resetToken]/[userId].js进入 pages 文件夹如下所示：

结果，这给了我哈希令牌（仅当它在没有/内部的情况下生成，否则我将得到一个 404 页面）和userId.

调试后，我删除了 2 个p标签，并ResetPasswordPage在返回中传递了组件，将我需要的参数作为道具传递并像这样（ResetPasswordPage组件）获得它们：

但如果我这样做，我会得到Error: React.Children.only expected to receive a single React element child。

如果我从ResetPasswordPage组件中删除其他 2 个子级，则我想要的页面会被呈现（同样，仅当生成的令牌没有 a 时/）。有什么方法可以渲染其他 2 个孩子（我在 3 个组件之间确实有 <> </> 标签）？这些对于页面工作很重要（它们显示导航链接和错误/成功消息）。

我怎样才能避免这样的事实，即如果令牌与 a 进行哈希处理/，用户将获得 404 页面？

编辑 2.0

组件的完整代码ResetPasswordPage：

因此，如果我删除Logo并MessageStyle呈现页面。

我是 Next Js 的新手。每当我单击链接时，它都会更新 URL，但页面未显示任何数据。但是在 Elements 中存在数据。

这是导航文件的代码：

博客.js 文件：

这是我的文件夹结构：

我们知道在 Next.js 中，我们在文件系统中表达应用程序结构。将文件添加到 pages 目录时，它会自动作为路由使用。例如：

页面/about.js → /about

页面/blog.js → /blog

页面/index.js → /

但我想手动选择要为每个路径渲染的组件文件。例如在下面的代码中，如果我的路径 URL 是localhost:3000/about，我想呈现服务组件，我不想根据路由路径名来制作我的文件名。

我如何在不使用 React Router/Reach-Router 的情况下解决此问题。在不安装任何 3rd 方库的情况下是否还有其他可用选项？

提前致谢 ：）

我在下面有以下简单示例，我尝试更改 withRouter 的模拟实现。不幸的是，这似乎没有按预期工作。第二个模拟实现根本不会被调用。

零件

测试文件

输出

我正在努力将 react js 转移到下一个 js，我在 react 路由器中遇到了一些问题，假设我有很多仪表板路由并且这些路由必须通过login，所以我必须通过登录通过所有仪表板路由，如果用户不是登录而不是重定向到登录路由。

我的反应RouteWithAuthLayout

我Dashboard.js的看起来像这样

和我的Router.js

是否有任何类功能可以将我的反应路由器转换为下一个路由器？

假设我有 2 条路线：/videoand /products/[id]，所以我的pages文件夹包含video.jsand products/[id].js。当我使用router.push或Link导航到/videofrom/products/[id]时，URL 会更新为/products/video. 显然这不是正确的行为。

我错过了什么？

/如果未定义查询参数，我想将我的网站重定向到主页。我正在使用 nextjs 构建一个搜索网站，它/是主页，/search也是搜索页面。我将 URL 中的查询词作为/search?query=myterm. 当用户尝试在/search没有query我想将用户重定向到 home的情况下访问时/。但我该怎么做呢？

我想要完成的是在更改路由器时与github上的这个 React 应用程序完全相同的打开和关闭菜单动画，但是使用 Next.js（它几乎是相同的代码）

这是我在 github 上的应用程序仓库，这里是应用程序。

我正在尝试关注Next.js 文档，但似乎状态menuOpened未更新。

欢迎任何帮助！干杯!

项目结构就像

我想要做的是当用户成功登录（登录网址：-> http://localhost:3100/user/login）然后用户应该导航到仪表板页面（预期的网址：->http://localhost:3100/admin /仪表板）。任何人都请帮我解决这个问题..