问题标签 [reach-router]

我正在尝试为反应组件创建一个单元测试，其中组件的道具检查部分 url 路径以确定操作过程，并在路径的末尾接受参数或值。

使用https://testing-library.com/docs/example-reach-router中给出的示例，我创建了自己的单元测试，但是当我运行测试时，我的组件抱怨 uri 值不存在。此外，当我将 console.log(props) 添加到我的组件并再次运行测试时，props 是未定义的。

我尝试了一种使用 LocationProvider 包装我的组件的变体，添加了历史记录，如https://reach.tech/router/api/LocationProvider所示

相关的代码片段是 -

似乎没有任何效果。有没有办法将道具传递给一个单元中的 uri (@reach/router) 组件？正如我所说，我的单位是上面给出的那些的副本

我是新来的反应，在初学者学习课程后反应。我决定进行一个创建每月订阅应用程序的个人项目，该应用程序将帮助我跟踪我的所有订阅。但是，我被困在一个点，我需要将一个组件的状态传递给另一个组件，但另一个组件可以通过路由访问，顺便说一句，我正在使用到达路由器。有没有可能的方法。下面是我的代码。所以我基本上想要做的是，当我点击我列表中的订阅时，（比如：Netflix）它基本上应该带我另一个页面，并向我展示有关该订阅的所有必要细节。在这里，我希望通过状态（mylist）。

应用程序.js

List.js

详细信息.js

使用 Reach 路由器（不是 React 路由器！）我有 2 个嵌套路由：

/g/123 /g/123/about

其中 123 是一个:groupId参数：

在外部GroupPage组件中我需要使用:groupId参数：

当我去/g/123，它呈现PostsView，它工作正常，我收到groupId123 inside GroupPage，但是当我去丢失并且/g/123/about为空（仍然在使用inside时）。groupIdparamsuseParamsGroupPage

如果我将useParamsfrom移动GroupPage到 nestedAboutView中，那么我可以接收paramsand groupIdfrom/g/123/about但这很令人沮丧，因为我不想重复多个嵌套组件的逻辑，而是宁愿将它放在外部GroupPage组件中（这需要groupId查询 API 以获取组相关数据，然后我使用上下文使其可用于那些嵌套组件）。

我做错了什么，有没有办法实现我的需要？谢谢你。

我有以下主要课程

然后我的路由器是这样的

例如，当我从“/”导航到“/mobileApp”时，他正在重新加载整个树（页眉和页脚）。

当我从“/subtitles”导航到“/subtitles/Browse”时，他没有。

我的目标是当他从“/”切换到任何其他页面时不重新加载页眉/页脚部分（但是如果我们直接转到“/mobileApp”，他需要加载整个树。

我错过了什么？

编辑好的......问题来自我的导航！我使用的是简单的标签，而不是 React Router 提供的……很高兴知道；）

我想读取 clientProvider 中的 url，然后渲染应用程序的其余部分，但它会引发此错误：

: 的孩子必须有一个pathordefault道具，或者是一个<Redirect>. 在元素类型上找不到[object Object]

这是我的 2 节课

应用程序.js

以及读取 url 后的 CLientProvider

我正在尝试传递我自己的自定义道具（函数、对象..等），但它们没有传递，当我尝试不带 gatsby 的 @reach/router 时，它工作正常。

我的 app.js：

我的 OtherComponent.js

组件渲染得很好，但我的道具没有通过，当我控制台日志道具时，我只得到路径、位置、pageContext 和导航方法 ..etc 但不是我的道具

旁注：我正在使用 gatsby 的 gatsby-plugin-create-client-paths

我正在内部 UI 上创建单页应用程序。屏幕左侧出现一个菜单 ( CollectionsInventory)，其中包含Link从 API 调用生成的 s，在右侧，生成的对象 (a Collection) 显示在其组件中。道具通过 a 传递url-parameters。我还使用Grid来自 patternfly4 的组件来管理 UI。这是它的样子：

这就是问题所在；我可以通过单击相应的链接或直接访问它来显示一个集合（例如，如果用户想要访问他最喜欢的集合的书签，这很有用）。但随后，收藏品就卡在那里了。每当我点击一个新链接时，什么都没有改变。也许是因为它在同一条路上？有没有办法让链接触发重新渲染？或者我没有使用正确的组件，因为带有链接的菜单在路由器之外？

在CollectionsInventory中，链接显示在表格中，并且是从集合名称生成的，如下所示：

我在一个 gatsby 项目中，我正在尝试使用“qs”库和在提到的文档中添加查询字符串：

然后 history.push(myStringParameter)

Gatsby（Reach 路由器）中不存在 useHistory，那么我可以使用什么来代替？

有没有等价的到达路由器？我只真正使用过 React 路由器。

我正在使用 Reach 路由器库添加 url 参数。 import { useNavigate } from '@reach/router'

const navigate = useNavigate()

然后我使用 qs 库将查询参数添加到 url

这适用于添加查询参数，但页面滚动到顶部。如何停止这种默认行为？

我正在尝试制作一个只有一页来处理所有路线的 Gatsby 项目。我有这样的索引页面：

在src/pages文件夹上我只有index.js

我怎样才能让这个页面处理所有的路线？

检查 Gatsby 文档（https://www.gatsbyjs.com/docs/client-only-routes-and-user-authentication/）我知道我可以gatsby-plugin-create-client-paths像这样使用插件：

如果我app.js使用反应路由器制作一个名为的页面，这会很好。所以所有的路线/app/*都到这个页面。

但是我怎样才能在根 url: 上进行这种重定向/。我想让任何路线/*都转到索引页面：index.js

关于如何做到这一点的任何建议？:)