问题标签 [reach-router]

假设我有很多路线，我想将它们分成几组。我将如何在 React with Reach Router 中实现这一点？

我基本上想要完成的示例：

我试图让到达路由器以编程方式从我的一个组件中导航。URL 已按预期更新，但路由未呈现，如果我查看 React 开发人员工具，我可以看到原始组件被列为正在显示。

如果我在新 URL 处刷新页面一次，则它会正确呈现。

我怎样才能让它渲染新路线？

下面显示了一个简化的示例，我正在使用@reach/router@1.2.1（我正在使用 Redux 也可能很突出）。

我正在尝试实现页面加载（实际上是假页面加载），建立的超时时间长达 1500 秒（我的控制）。使用到达/路由器库，就像杰克的网站示例在这里https://jacekjeznach.com（单击每个页面以查看加载）。

我已经非常成功的页面加载，但不完全。页面加载仅在我刷新页面时发生。仅仅因为步骤只工作刷新或实际页面到页面而不是 SPA 路由。目标是在切换路由或从导航链接中获取其他单词的组件时具有“假页面加载”，所以这就是我到目前为止所拥有的......

我有感觉，这些语法useEffect(setTimeout(()=> (...), 1500)或useEffect(setInterval(()=> (...), 1500)可以适用于路线，但我无法找到更好的解决方案。

我也尝试过 Suspense/Lazy，是的，它也可以工作，但不幸的是，我无法控制加载时间（延迟时间）。

我曾考虑过使用setTimeoutforSuspense但不知道如何设置它。

我的想法快用完了，还有想法或建议？感谢您的帮助，在此先感谢。

我在使用 Reach-Router Not React-Router、 GSAP 和 React-Transition-Group 组合的页面过渡动画上遇到问题。

我做了研究并找到了使用 Reach-Router 和 React-Transition-Group 的页面转换动画示例

https://reach.tech/router/example/animation

这个例子使用 CSS 动画，但我想用 GSAP 动画它，它使用的是纯 JavaScript 而不是 CSS。所以，这意味着我不需要使用TransitionGroupand CSSTransition。

后来我发现了另一个关于 GSAP 页面转换动画的例子。

https://stackblitz.com/edit/gsap-react-route-animation

但它使用反应路由器而不是到达路由器。由于 react-router 和reach-router 看起来几乎彼此接近。我决定从 GSAP、RTG 和 React-Router 开始我自己的实验，这样我可以更好地理解它是如何工作的……这是我的沙箱。

https://codesandbox.io/s/react-router-gsap-pgu24

动画成功了！然后，我做了另一个实验，得到了代码的精确副本并转换了一些区域以使其与Reach-Router兼容。这是我的沙盒。

https://codesandbox.io/s/reach-router-gsap-h5rny?fontsize=14

除了动画，一切都有效。我一直在努力寻找问题所在，但我在这里不明白。我错过了什么吗？请问需要帮助吗？

我的应用程序中有 2 条路线：/和/about. 如果用户首先访问/然后导航到，/about则不需要特殊行为。但是，他们在打开时刷新页面/about，或者如果初次访问是，/about那么我需要检测到这一点并做一些事情。

我怎样才能做到这一点？我需要createHistory先吗？

https://reach.tech/router/api/createHistory

我有一个导航（功能）组件，其中包含一个使用 GSAP 的简单动画。它在页面第一次加载时动画。我希望每次用户点击不同的页面时都可以制作动画（我使用 React Reach Router进行页面导航）

我知道使用基于类的组件，我可能会使用componentDidMount方法，但是如何使用功能组件来实现呢？而且我认为window.onload不会起作用，因为站点实际上并没有重新加载，而是重新路由。

这是有问题的代码

我有一个应用程序，其中有N不同的布局（例如，、、BeforeLogin等MainLayout）SomeElseLayout。

每个布局都是一个 HTML 标记组件，应该包装一个页面组件，例如Settings,Profile等。

我需要能够为我的每条路线（或一组路线）分配特定的布局。

例如，我想要 URL

...使用BeforeLogin布局组件（作为子组件），以及

...使用MainLayout。

此外，某些 URL，例如/可能在用户登录之前使用一种布局，之后使用另一种布局。但是，我认为，一旦回答了主要问题，就可以通过条件渲染来实现。

所以问题是 - 我该怎么做？

（当然，除了显式渲染每个页面组件中的布局，我更希望我的组件与布局无关）

谢谢！

PS对于那些错过的人，问题是关于Reach router，而不是React Router。

我正在尝试使用到达路由器来创建一个不准确的链接。我希望用户能够访问 www.website.reset/... 并登陆与 www.website.reset/ 相同的页面。在使用 Reach Router 时，我还没有找到使链接不准确的方法。这是刚刚缺少的功能吗？

滚动条和滚动在Router子组件内的父元素（“overflow-y”设置为“scroll”）中被禁用，为什么它的行为是这样的，我如何防止它/使它工作？

现场演示：https ://codesandbox.io/s/priceless-johnson-1fkju

我对三个不同的路线使用相同的组件：

反正有没有把它结合起来，就像：