问题标签 [reach-router]

I'm using "@reach/router": "^1.2.1" and in my App.js file I've got a fallback component to show while my routes are loading:

But depending on the route, I want to use a different loading component as the fallback, so something like:

This won't work because Router needs to be wrapped around Suspense, instead of this way around. But if I split it like below then the second Router list doesn't get picked up and the route is a 404:

What is the correct way to provide a fallback component on a routing level?

编辑//

我想我的问题不是很清楚。当我的 url 指向http://localhost:1233/details/ '${parkcode}' 时，我试图返回一个公园。我在 results.js 文件中定义了 url 的参数。但是我在我的 details.js 中定义 this.setState 以根据也恰好是公园代码的 id 仅呈现公园的一个结果时遇到了麻烦。

我是 React 的新手（可能是 JavaScript，我不知道了）。我正在学习一个教程——我决定分支并使用 axios.get() 从 API 获取数据，而不是使用 npm 包作为 API。我能够将组件的结果呈现到浏览器中，但是在添加到达路由器（我假设它类似于 React 路由器）之后，我无法将我的 API 调用的一个结果呈现为我尝试的页面build 应该只根据我定义的 ID 显示一个结果。

在我的主文件中，也就是这里的 Results.js，我能够毫无问题地获取数据，并使用 JSX 将它们包含在我的文件中并渲染它们。我正在尝试使用与我在 Details.js 页面中的该页面中所做的相同的逻辑（该页面应该只向路由中的 ID 显示一个结果）。

我如何在 Results.js 中使用 axios

我如何尝试在 Details.js 中使用相同的逻辑

即使我进行了 API 调用，它也无法识别 park.name。但是，如果我硬编码 park[0].name 它可以工作。我不知道我在这里做错了什么。这可能是一个明显的问题，但请帮助我。

我希望页面能够识别 GET 请求中定义的 id 以及 axios，并呈现与 id 相关的公园详细信息。但是现在，它什么也没做，我一直坚持这一点:(

如何获得到达路由器的当前路由。在反应路由器中，一个会通过参数得到它吗？

文档目前没有显示如何执行此操作的示例。

我在以前使用 Reach Router 的项目中设置 React Router。

之前，Reach 的路线如下所示：

然后，切换到 React Router，我的文件设置如下：

但是，路由器只显示该路由中的 AnonHomepage 和/或 Homepage /，不再显示/explore（或任何其他）路由。我究竟做错了什么？我怎样才能让它使用正确的组件，而不是总是显示基本路由的组件？

问题：是否可以修改浏览器地址栏和浏览器历史记录中显示的当前 URL？

具体来说，我只想修改用户可见的URL；我不想触发导航。（我有一个 Gatsby 应用程序，而 Gatsby 正在使用 Reach Router。）

动机：我有一个图片库，用户可以单击并导航到 URL，例如/images/?id=52. 这种方法的优点是/images/可以预取以启用页面的即时呈现。但是，这种方案对禁用 JS 的用户不友好，因为他们在使用查询参数导航时根本看不到任何图像。所以我也预渲染/images/52/了没有 JS 的页面。所以我想做的是使用查询参数导航 JS 用户，然后将他们看到的 URL 修改为可以与包括非 JS 用户在内的任何人共享的 URL。

如果 url 不是“/”，我希望对用户隐藏一个列表。此列表呈现在顶层并包含许多链接。每当我导航回“/”（索引路线）时，我都想再次显示该列表。我怎样才能最有效地使用到达路由器来收听这个位置并相应地更改状态，以便我可以隐藏/显示我的文章列表并使用适当的路径隐藏/显示文章？

我尝试使用导航组件并使用 LocationProvider 组件，但目前卡住了。下面的组件被包裹在一个带有路径'/*'的路由器中

我正在使用带有上下文 API 的反应钩子在多个组件之间共享数据并使用到达路由器进行路由。我的代码看起来像这样：

在此示例中，任何由ContextProvider公开的数据都将可供所有组件使用。我的问题是，我怎样才能只将上下文暴露给 Comp3 而不是 Comp1 和 Comp2？

注意：我使用的是到达路由器。

我正在尝试在result提交表单后使用到达路由器导航到 url。使用props.navigate所需的 url，但没有呈现任何组件（我试图<Result/>在查询后呈现。

为了增加复杂性，我想将personsResult道具传递给Result

这是我当前方法的概述。

react-router-dom如果有更简单的方法来解决这个问题， 我愿意切换到。

我有一个带有标题组件的布局，其中我的所有页面都呈现为子页面，因此根据许多页面向标题添加特定样式时遇到了一些麻烦，

因此，主页具有透明背景，其他页面可以具有填充颜色或相同的透明颜色

我一直在通过添加一个函数来添加该类，以将路径名与 location 道具中的当前路径匹配，但我意识到会有很多页面和嵌套页面可能有或没有，className 来更改标题

所以我不认为为每个页面添加一个条件是一个很好的解决方案，所以我想通过创建一个动作（使用redux btw）来处理这个问题，将className作为有效负载传递给需要的地方，并且连接的标头接收这是为了改变颜色，但我不知道只是添加一个className是否太多，到达路由器是否通过路由组件处理这个？

编辑：我忘了提到我的网站包含从这个模板构建的大约 25k 页面。Derek Nguyen 的回答将适用于页面数量较少的小型网站，但是当扩大规模时，matchPath数据将存储在 JS 中，导致捆绑包大小很大。（对我来说大约 3.1mb！）

挑战

我需要创建一个页面，createPage其中包含一个子路由系统，其中默认路由构建为静态 HTML，但任何其他路由都是客户端专用的。

问题

我在方法中有一个用于静态 HTML 生成的模板组件createPage，还有一个pages/目录中的组件，用于为仅限客户端的路由分配一个matchPathto。

在最新版本的 Gatsby 上，模板组件为默认路由呈现，但随后“页面”组件为仅客户端呈现，当我只希望子路由呈现时，导致整页重新呈现，如父路由中有需要持久化的数据。

在我看来，有两个组件和两个路由器似乎是错误的，但我想不出任何其他方式来实现我想要实现的目标。

这是我的路由设置的示例：

模板用于createPage

仅客户端组件/pages

我还复制了这个代码框中的行为。确保转到https://hkhbb.sse.codesandbox.io/test/foo/bar以查看正确的输出。

我在 github 上创建了一个关于此的问题，但还没有回复。