как передать атрибуты ссылки другой ссылки

Question

допустим ссылка на мой сайт https://my-syte/?id=1 и у меня есть кнопка на сайте, которая ведёт на другую страницу/сайт задача передать атрибут ?id=1 чтобы ссылка с кнопки была https://button-href/?id=1 соответственно атрибуты могут быть абсолютно разные использую react, если это важно

код самого компонента:

import bgDesk from '../../assets/mainBlock/bg.png'
import bgMob from '../../assets/mainBlock/MobBg.png'
import { useRef } from 'react';

const MainBlock = (props)=>{
    let bg = bgDesk;

    if(window.innerWidth > 1024) {
        bg = bgDesk;
    } else {
        bg = bgMob;
    }
    return(
        <section className={s.mainBlock}>
            <div className={s.container + ' ' + 'container'}>
                <h1 className={s.heading}> <div dangerouslySetInnerHTML={{__html: props.texts.heading}}></div></h1>
                <p className={s.subHeading}> <div dangerouslySetInnerHTML={{__html: props.texts.text}}></div></p> 
                <a href={props.texts.href} target='_blank' className={s.button + ' tryForFree'}>{props.texts.button}</a>
            </div>
            <img src={bg} alt="" className={s.Bg} />
            <img src={props.img} alt="" className={s.img} />
        </section>
    )
}

export default MainBlock;

Answer 1

Можно воспользоваться стандартным свойством window.location

Достаточно взять параметр search, удалить первый символ(?) и добавить в нужное место

<a 
    href={`${props.texts.href}&${location.search.substring(1)}`} 
    target='_blank' 
    className={s.button + ' tryForFree'}
>
    {props.texts.button}
</a>

Если есть вероятность, что в props.texts.href может не быт get параметров, тогда придется добавить проверку

Полученный props превращаем в URL и проверяем get параметры

const urlLink = new URL(props.texts.href);
let sep = '&';
if (!urlLink.search) sep = '?';

И меняем рендер так:

<a 
    href={`${props.texts.href}${sep}${location.search.substring(1)}`} 
    target='_blank' 
    className={s.button + ' tryForFree'}
>
    {props.texts.button}
</a>

БЛОГ НА HUSL

как передать атрибуты ссылки другой ссылки

Ответы (1 шт):