问题标签 [reach-router]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2589 浏览

reactjs - 到达路由器后退按钮

我有一个没有路由的反应应用程序,但我需要为我的 SPA 更改某种 URL。

我有一个需要很长时间才能加载的主页,并且主页上的其中一个项目有一个用于更改路线的点击事件。一旦我将路由更改为“不同的页面”(实际上只是渲染不同的组件),当我点击后退按钮时,这会重新加载主页吗?或者它是如何保持状态并立即出现的?

我无法在不知道这一点的情况下构建这一切,因为如果它不能做我想做的事,那将是浪费时间。

我正在使用到达路由器:https ://reach.tech/router/api/Link 对于替换:布尔,此页面显示“如果为真,历史堆栈上的最新条目将被替换为新条目。使用此当您不希望用户单击后退按钮时显示上一页时。” - 这与我想要的有关,但前一页“出现”并没有说明这是否是一个新的请求。

0 投票
1 回答
214 浏览

reactjs - 无法使用 graphQL 和 createPages 在 Gatsby 中进行转换

我做了一个 gatsby-wordpress-starter 的 git 克隆(https://www.gatsbyjs.org/starters/?c=Wordpress

在不做任何更改的情况下,我添加了姿势:(https://popmotion.io/pose/examples/route-transitions-reach-router/

按照上面网址中的说明,我将 components/layout.js 文件更改为以下内容(略有不同,因为页面路径没有像示例那样硬编码到布局中):

当我运行它时,我得到: Uncaught TypeError: Cannot read property 'map' of undefined

如果我展开'location'的console.log,那里没有'key'

除此之外,我还尝试安装官方 gatsby 转换插件,但这也无法正常工作。它执行进入转换但不执行退出转换。它确实会触发退出的转换,但直到页面内容更改后才会触发。

0 投票
7 回答
5276 浏览

reactjs - 导航到新页面后停止到达路由器向下滚动页面

当我导航到新页面时,Reach Router 会向下滚动到页眉之后的页面内容(如果内容足够长)。我假设这是为了可访问性,但对我的应用程序来说不是必需的,而且它实际上很不和谐。可以禁用此行为吗?

请注意,我说的是 Reach Router 而不是 React Router。

到达路由器

0 投票
0 回答
447 浏览

reactjs - 在 React 应用程序上查询 API 并重定向到搜索栏(组件)的结果页面

所以我在尝试构建我的搜索组件以通过 Axios 从我的 API 请求中查询数据时遇到了困难。现在它只是填充一个警告框。

它应该做一些事情,将查询中的数据与 API 中的数据进行比较,将匹配的数据作为 props 传递到结果页面并重定向到该结果页面以显示这些结果。该应用程序部署在这里https://suite-search-lk.surge.sh

我该怎么办?感谢任何帮助:D

0 投票
2 回答
1050 浏览

javascript - 在 React 中使用来自父级的数据更新组件

在我的反应应用程序中,我有这个从其父组件继承数据的子组件。但是,当单击相关的锚链接时,它不会使用来自子组件的新数据更新页面。

这是我的构建 - https://suite-search-lk.surge.sh/result/369523

从上面的链接中,如果您单击建议的卡片 h1 元素,它只会使用 id 更新 URL,但不会使用来自该 id 的相关卡片数据更新页面。

知道如何解决这个问题吗?我是否必须强制组件重新更新?

父组件(卡片包装)

子组件

0 投票
3 回答
2796 浏览

reactjs - 如何使用到达路由器和谷歌分析跟踪页面浏览量?

我正在将骨干应用程序移植到 React 应用程序。在骨干应用程序中,我有以下代码段

然后在更新它调用的元标记后在每个页面上渲染

我假设我可以将初始化逻辑放到 index.html 中,但是什么是挂钩window.ga('send', 'pageview');到到达路由器的好、简单的方法,这样当路由更改或更新时,页面浏览量将被发送到 GA?

0 投票
0 回答
67 浏览

javascript - 如何使用 Reach Router 将渲染方法作为属性包含到 Route?

我想使用到达路由器制作受保护的路由。在 React Router v4 中,我可以使用 Route render() 方法来实现:

然后声明路线:

我不知道如何访问或修改到达路由器中的 render() 方法:

如何使用到达路由器来做到这一点?必须有一种更好的方法,然后在受保护组件内的 render() 方法中编写条件。

0 投票
2 回答
1604 浏览

reactjs - 到达路由器无法在 gh 页面上刷新

我有一个托管在 gh-pages 上的个人网站,并且已经部署了它等等,一切似乎都运行良好。但是我注意到路由器在主页上以及单击其他页面的链接时也可以工作,但是当我刷新 url 或手动输入时,它不起作用。

我正在将 React 与到达路由器一起使用。我已经尝试使用process.env.PUBLIC_URL我所有的链接和路径。但是,这并不能解决问题。

我的路由如下:

当我在本地遇到这个问题时,我通过这样做来解决它

但是,由于这是 gh-pages 上的产品,我不确定是否有等价物!

有没有人有任何想法?我花了几天的时间来思考这个问题,并询问了其他几个也无法解决的开发人员!

提前致谢!

0 投票
1 回答
1603 浏览

reactjs - 路由不适用于使用 ReactJS 和reach-router 打包的 Electron 应用程序

我已经成功地使用电子成功打包了一个 React 应用程序。它运行良好并加载主页,但是当我尝试路由时,它根本不起作用。我正在为我的项目使用reach-router,我猜我必须为此目的调整我的路由配置。

仅供参考,这不是我正在发出的网络请求,它只是从不需要 API 调用的主页路由到登录页面。但什么也没有发生。

有关如何使用 react-router 解决此问题的帮助,但互联网上的reach-router上没有任何内容。

0 投票
1 回答
405 浏览

javascript - 如何在仅客户端 Gatsby.js 页面上设置默认组件

我正在尝试在我的 Gatsby 项目中构建一个注册确认页面。我从在这里创建的状态器开始https://github.com/DWboutin/gatsby-react-intl-starter

gatsby-node.js中,我设置了一个 pageMatch 道具,让我的页面处理提供的 ID。(请注意,这value是我的语言构建过程的一部分)

有了它,我可以访问页面/client-side-page/{MY ID}。在该页面中,我用于reach/router检索:id路径中的 并仅在提供确认表单时才呈现确认表单。

一切正常,但是,当我直接加载页面时,它向我展示了 404 组件。

我试图设置一个默认的路由组件,当它找不到好的路径时。但它在显示它之前一直向我显示 404。

有没有办法做到这一点,或者我应该找到另一种方法来管理这个?

谢谢您的帮助!