时间戳

首页 > 解决方案 > 使用 Gatsby.js 在重定向中捕获参数

reactjs - 使用 Gatsby.js 在重定向中捕获参数

问题描述

我有一个快速而肮脏的问题。

是否可以从 Gatsby.js 应用程序内部的服务器重定向中捕获查询参数？

我们有一个 Pardot 跟踪链接，它确实重定向到我们在 Gatsby.js 中构建的感谢页面，我想通过该重定向将一些查询参数传递给它自己的应用程序。

例如：

www.trackedlink.com/thank-you?programme_code=CODE_FROM_REDIRECT_ON_SERVERSIDE

将重定向到：

www.gatsbyapplicationthatwillreadthequery.com/thank-you?programme_code=CODE_FROM_REDIRECT_ON_SERVERSIDE

如果它来自应用程序外部，是否可以在应用程序内部读取该查询？

干杯，祝您度过愉快的一周！

标签： reactjsparametersgatsby

解决方案

如果它们在客户端触发，则应用程序将捕获重定向，是的，如果它们来自应用程序外部或使用标准锚点，则有可能。不使用@reach/router(<Link>组件，因为它是一个限制)。

一种干净且可扩展的使用方法是在gatsby-browser.js配置中添加函数：

import React from 'react';
import { checkUrlFunction } from './src/services/yourCheckUrlFunction';

export const onClientEntry = () => checkUrlFunction();

gatsby-browser.js使用API添加函数onClientEntry将在页面加载后触发您的函数。从文档中：

onClientEntry Function (_: emptyArg, pluginOptions: pluginOptions) => undefined
在 Gatsby 浏览器运行时首次启动时调用。

您的函数应如下所示：

   export const checkUrlFunction = () => {
         if (typeof window !== 'undefined') {
           const queryString = window.location.search;
           const urlParams = new URLSearchParams(queryString);
           const programmeCode= urlParams.get('programme_code')

           if(programmeCode) window.localStorage.setItem('programmeCode', programmeCode)

           console.log(programmeCode); // will output CODE_FROM_REDIRECT_ON_SERVERSIDE      
         };
       };

如果在触发函数时未定义对象，请注意typeof window !== 'undefined'避免出现问题的必要条件window

嗨 Ferran，感谢您的解决方案，但不幸的是，重定向发生时它不起作用。仅当查询字符串在应用程序内部时才有效

是的，添加函数的想法gatsby-browser.js是避免checkUrlFunction()在每个页面、模板或组件中添加。缺点是你失去了一点控制，但它节省了大量的覆盖代码并提高了可伸缩性和可读性。

谢谢，Ferran，如果你能给我看一个例子——那就太棒了！这个cookie主题对我来说是一种未知的水

因此，随着您的规范更新，我添加了该localStorage方法，因为在这样的非 IDE 环境中更容易实现，但想法完全相同。

  • 在函数中设置一个 Vault（cookie或localStorage）自动化gatsby-browser.js

    if(programmeCode) window.localStorage.setItem('programmeCode', programmeCode)

这将设置一个 localStorage 键/值对 ( 'programmeCode'(key)/ programmeCode(value)

  • 在您的组件中访问该保管库。使用componentDidMount生命周期或useEffect钩子来确保在挂载 DOM 树之前加载。

    useEffect(()=>{
 if(typeof window !== undefined) console.log(window.location.getItem('programmeCode')
}, [])

推荐阅读