问题标签 [reach-router]

我在正在构建的 Web 应用程序中多次遇到这种情况，我正在寻找一种最佳实践来实现和重构。

作为入门的一部分，用户将创建一个 pin，单击/点击一个按钮将其保存到状态并移动到新视图（或路线），重新输入 pin，然后单击/点击一个按钮以确认并提交它，将其发送到后端。

我正在尝试确定构建此功能的最佳方法，以处理在将信息发送到服务器之前发生在故事中间的无意刷新或刷新。

我看到了几种处理/构建它的方法：

1. 我可以使用路由（即foo.com/account/pin/create然后foo.com/account/pin/confirm）构建它，并通过路由器提供的道具传递引脚。但是，如果用户刷新/pin/confirm，则传递的 pin/pin/create会丢失。我可以检查道具并将它们重定向回/pin/create并显示消息原因。
2. 我可以在没有路由的情况下使用具有state.view道具的类容器来构建它。在渲染中，我会运行一个开关来确定基于state.view. 例子：

3. 我可以使用 Redux-Persist 将其存储在本地存储中，但是将私有 PIN 放入浏览器的本地存储中感觉很麻烦。（这是否像我被引导相信的那样不安全？）此外，我倾向于更喜欢组合事物，并避免将本质上不是真正全球性的事物放入 Redux。

所以问题是这些选项中哪一个是最好的？或者有没有更好的我没有列出？

注意：我正在使用@reach/router。

编辑添加代码片段。

我目前正在将一个大项目切换到 TypeScript。我很新，不习惯它。

所以，使用@reach/router，我有以下路由：

Sign定义如下：

我收到以下错误：

有什么问题？

我有一个组件需要在导航到另一个组件之前进行确认。反应路由器中有一个Prompt组件可以在导航到另一个组件之前询问确认，但我在reach-router. 有什么方法可以让用户在导航到另一条路线之前进行确认，如果用户回答为“否”则取消导航？

我以前使用下面这样的到达路由器，它工作正常

我决定用上下文重构我的代码，代码被重构为这样的：

重构后，ComponentA 无法正常工作，因为未传递 url 参数 prop id

在 ComponentA.js 中，像这样测试：

同样，当 I 时console.log(this.props)，它返回的结果与this.context

有人可以帮我理解为什么会这样吗？如何正确重构上下文？

非常感谢

使用<Link to="/projects/some-project-slug" />确实会更改浏览器中的 URL，但应用程序不会更改其显示。

这是应用程序：

这是包含 a 的组件<Link/>（在 中实例化<ProjectsIndexView/>）：

中的网址props.href是正确的。如果我在重定向到的 URL 处刷新浏览器，那么只有视图才能工作。我试图确保不需要刷新页面。

我确实需要这两者/并/projects使用相同的组件，因为我不希望访客被扔到<NotFound/>他们直接去的地方/projects。

这个问题看起来很相似，但是它们导致代码中的重定向，而我使用的是<Link/>.

任何指导和尊重的回答将不胜感激。

更新

该<ProjectTeaser/>组件在外部库中定义。有 3-4 个项目使用此组件。为了好玩，我尝试将组件定义复制到使用它的同一个项目中，这意味着它不再是从外部库导入的。

现在路由工作。

谁能向我解释这是怎么发生的？这是相同的代码！只是位于不同的项目中。我看到的唯一区别是库版本是预编译的。

但是，如果这正如@reach/router 库所期望的那样工作，那将非常不方便，因为我试图避免必须<ProjectTeaser/>在每个需要它的项目中复制定义。

我正在开发一个 Gatsby 项目（一个语言学习博客），并且遇到了一个问题，该问题仅在生产版本中发生，因为服务器端渲染。

我使用以下方案以编程方式为每篇博客文章生成一个页面： /posts/{post-name}. 每个帖子还可以有许多子路径映射到 UI 中的打开选项卡。例如，/posts/important-spanish-verbs/lesson将打开课程选项卡。每个页面都有一个 的matchPath属性/posts/{post-name}/*，这些被处理为仅限客户端的路由，使用reach-router.

使用gatsby develop，应用程序完全按照预期工作。当我访问时/posts/some-post/podcast，它成功打开到播客选项卡，我可以看到活动选项卡设置正确。

问题在于gatsby build && gatsby serve，当我重新加载直接导航到帖子内特定选项卡的 URL 时（手动访问整个 URL 或刷新），UI 中的活动选项卡设置不正确。

以下片段（高度简化和浓缩以演示问题）大致概述了问题：

当我运行使用上面在生产构建（使用 SSR）中演示的方法的代码时会发生什么，例如，当我访问时posts/example-post/lesson：

• 内容通过 Reach 路由器正确呈现（即课程选项卡的内容已打开）
• 课程标签有课程inactive（错误）
• 在控制台中，我看到tab /posts/example-post/lesson active? true打印出来了，即使 CSS 类没有更新！

我已经尝试了所有我能想到的尝试更新 UI。一旦我单击不同的选项卡并且窗口位置更改而没有刷新，一切都会更新正常并且活动选项卡 UI 按预期工作，但我似乎无法让它根据isActive变量重新呈现。

有谁知道解决或解决此问题的方法？

谢谢！

我有一个使用React Static构建的站点，该站点具有始终存在的 Header 组件。根据当前页面是否有 hero 组件，Header 应该是浅色或深色。

Header 在路由之外渲染，并useEffect在子渲染之前触发。这可能是因为路由。

这是当前代码：

将呈现的<Routes default />是在 React Static 中配置的静态页面static.config.js。

下面是 Hero 组件的示例：

当我运行应用程序并查看日志时，这就是我得到的：

尽管 Hero 在路由器中而 Header 不在，但我怎么能以某种方式从 Header 中检测到 Hero 的存在？这感觉像是一个很常见的用例，但我在互联网上找不到任何信息。

提前致谢！

我正在使用 Gatsby.js 自从我开始构建菜单以来，一切都非常好。当我单击链接组件时，我等待了大约 2 秒钟，然后我被重定向到下一页。奇怪的是 URL 会立即更改，但内容不会。

我读了这篇文章 https://www.gatsbyjs.org/blog/2019-06-12-performance-improvements-for-large-sites

但无论如何也无济于事。

编辑：如果下一个站点上的内容很小，则延迟也较小。

Github 问题：https ://github.com/gatsbyjs/gatsby/issues/21193

当我尝试在 Gatsby 中创建自定义页面时遇到问题。除了 app.js 文件之外，我已经删除了 pages 文件夹中的所有文件。现在，我在 gatsby-node.js 的 onCreatePage 函数中检查页面路径“/app”。如果找到，我将路径从“/app”更改为“/”并创建该页面。之后，我将使用 app.js 文件路由到不同的页面。

当一切都完成并且我在浏览器中检查路由时，它给了我一个错误，说“无法读取未定义的属性页”对于路由“/our-work”。只有当我转到“/our-work”路线时才会收到错误消息。默认的“NotFound”页面不起作用。无论如何，主页都会显示在“/our-work”路线以外的所有路线上。

请浏览下面的图片。谢谢！

应用程序.js：

盖茨比节点.js：

主要路线 - '/'：

有问题的路线 - '/our-work'：

主页面显示在 NotFound 组件预计起作用的路线上：

我使用具有自定义保护路由的到达/路由器，如下所示：

我希望这是嵌套路由user/:id

我应该怎么办？