问题标签 [reach-router]

技术栈："@reach/router": "1.3.1", "react": "16.12.0". 我的一个组件中的文本输入丢失焦点/丢失事件跟踪时遇到问题。

我的结构示例：

所以结构看起来像这样：我有一个主视图组件和两个不同的路由：“/home”和“/document-upload-view”。当我单击 Link 元素时，它会将我重定向到 DocumentUploadView，我可以填写第 1 阶段的输入，然后我可以按 Next 并出现第二阶段。我可以填写文本输入并使用导入的 sendFile 函数发送文件。

sendFile 函数将数据发送到服务器，然后在成功后使用导航（“/home”）重定向我。它第一次完美运行。如果我想第二次上传文档，然后按下Add document将我重定向到上传页面的按钮，就会发生一些奇怪的事情。第一阶段效果很好，第二阶段就不行了。一切都出现了，我可以指向输入并写一些东西，但事件处理程序没有检测到任何事件。我试图在 onClick 事件和 console.log(e.target) 甚至 console.log(e) 之后强制聚焦输入，但它没有显示任何内容。

它第一次运行良好，事件正在控制台中记录。重定向操作后发生了一些事情。我试图使用 react-router 而不是到达路由器，但它不起作用。

知道这里发生了什么吗？为什么重定向操作会导致这种情况？我正在使用钩子，但我试图毫不费力地使用类。我正在与其他人一起检查每一步的路径，我们没有注意到任何可能导致或成为失去焦点或失去通过输入捕获事件的能力的任何事情。

我目前正在努力解决当用户单击一个将为他们注册帐户的按钮时如何重定向到主页：我当前的设置是这样的

我将如何添加一个函数 signInWithEmailAndPasswordHandler 以便在调用它时将用户重定向到 /landingscreen？我已经阅读了到达文档，但我是 JSX 的新手，并且很难实现这一点。

我想知道是否可以在 Gatsby 布局组件中使用嵌套路由？我知道反应到达路由器支持这一点，但我不太确定如何让它在 Gatsby 中工作......

目前我有一个布局组件，其中包含我的站点标题和侧导航菜单。每个页面都正确加载到布局正文中。

我现在正在尝试在我的一个 MDX 页面中创建一个选项卡式界面。

是否可以使用嵌套路由器、嵌套布局组件或任何其他机制来避免在更改页面时重新加载整个正文内容（包括选项卡）？

我希望我也可以将子页面定义为 MDX，并将这些子页面引用为要为每个选项卡加载的内容，而无需重新加载我的主要布局组件或当前周围的页面内容。只是好奇这是否可能，或者我是否应该尝试采用不同的方法。

当前布局层次结构

目前，<PageLayout>当我导航到其他页面时（即使使用<Link>组件）重新渲染，<AppLayout>不会。这对我来说确实有意义，因为每个页面都应该替换 的内容<AppLayout>，但我很好奇是否有办法重组它或使用不同的机制来实现它。

我希望<PageLayout>在其内容中包含选项卡，但在切换选项卡时不会重新呈现该特定页面中的其余内容。

在本地构建没有问题，除非查看网络选项卡，否则最终用户不会在生产构建中看到任何问题。第一个页面请求 404，然后页面按预期呈现。

预期功能

渲染部门页面组件

渲染 PLP 页面组件

渲染 PDP 模板，项目名称是 ContentStack 内容的关键，查询参数从单独的产品 API 中提取产品数据

除了页面呈现之前的初始 404 之外，这一切都有效。

问题仅存在于 /shop/ 路由后面的页面。所有其他网站页面、路线、模板都可以正常工作。感谢任何建议。

在 src/gatsby-node.js 我有

我有一个带有以下路由的页面， src/pages/shop/index.js

还有一个也受此问题影响的模板 src/templates/pdp/index.js

自从将我的 Gatsby 项目移植到 Typescript 以来，我一直在为一系列零星的测试失败而苦苦挣扎。以下错误在我的 Jenkins CI 服务器上经常发生，但几乎从不在本地发生。我有几个使用Router组件的类似组件，@reach/router并且这些文件中的任何一个都可能发生故障。

失败信息

源文件

这是可能导致 Typescript 编译器错误的许多类似源文件之一。所有这些文件在浏览器中加载并按预期运行。

测试文件

更多上下文

源文件中使用的组件是从GitHub 问题讨论RouterPage中复制的@reach/router

辅助函数是从测试库文章renderWithRouter中复制的

这是我的编译器设置tsconfig.json

我的依赖来自package.json

最后，这里是gatsby-node.js用于创建Router组件使用的页面的配置。

我想使用 react 完成登录并到达路由器.. 本质上，我想在成功验证后从登录组件转到 HomeLayout 组件。我已成功登录

这是我的 App 组件的代码，它是项目的入口点

================

登录组件

============================

家庭组件

在该状态下，我设置了username=""、password=""和loggedIn = false。

预期行为

从后端获得结果后，我想导航到位于 /Home 的主页。

我尝试这样做navigate("/Home")，但这只是更改了 URL，而不更改组件。

帮帮我？如果来自 react-router 方面的人有所启发，那将很有用，因为我本质上是一个代码新手。

我有一个组件正在尝试为其构建分页功能

因此，当我单击链接时，它应该更改路径（确实如此）

问题是我的组件没有重新渲染，所以我似乎无法显示第 2 页（即使路线已更改）

我怎样才能听到我的组件的变化？我正在使用钩子

我搜索了文档，所有选项似乎都表明您应该只听路由更改使用LocationProvider和测试的东西

有没有办法

有reach-router，但有一个偏移量，比如说，-16px？我找不到任何关于它的东西。

更新的代码仍然不起作用

无法在这里找到答案来帮助解决我的问题。

在我的播放列表组件中，我有一个链接到轨道新路径的图像。我想将播放列表 ID 传递给曲目，以便它可以根据给定的 ID 显示曲目，但无论如何我都不会这样做。

我的播放列表组件返回：

在我的 Track 组件中，它执行以下操作：

谁能告诉我哪个组件错了？抱歉，我对 React 还是很陌生

谢谢

我已经阅读了 Gatsby 文档<Link>、仅限客户端的路由和 @reach/router。

我想我很清楚它是如何工作的。但是，我想知道是否有建议在静态页面和仅限客户端的路由之间进行链接，特别是使用 Gatsby<Link>与 @reach/router<Link>

比方说，/documentation/* 在/app/*

这里有4个场景：

1. 静态到静态（例如到 的链接/documentation/feature-1）/documentation/feature-2：显然应该<Link>在这里使用 Gatsby。

2. 仅限客户端的静态（例如指向 的链接/documentation/feature-1）/app/feature-1：我应该使用 Gatsby<Link>还是 @reach/router <Link>？有关系吗？由于目的地是仅限客户端的，我猜 Gatsby 的预加载<Link>不起作用？

3. 仅限客户端到仅限客户端（例如，指向 的链接/app/feature-1）/app/feature-2：我认为我应该为此使用@reach/router <Link>。但是我可以在这里使用 Gatsby<Link>吗？这样做有什么好处吗？

4. 仅限客户端到静态（例如，指向 的链接/app/feature-1）/documentation/feature-1：在这种情况下，我认为我应该使用 Gatsby <Link>，因为目标是静态的并且可能会发生预取。

也许这里的答案很简单，我应该<Link>对所有事情都使用 Gatsby，但我不确定这是否是正确的答案以及如果有的话会产生什么影响。

谢谢！