Как сгенерировать ссылку в React?

Question

[Александр Осадчий]

Здравствуйте!

Есть отдельный лендинг с акцией - попасть на него могут с письма

В письме ссылка на кнопке примерно такого вида:
site.com/bonus?offer=1&lang=ua&country=ua

И вот, человек зашел на лендин - там кнопка "Далее" и вот она должна перенять параметры из текущей ссылка (из кнопки)

<code>site.com/signup?offer=1&lang=ua&country=ua</code>

Суть в том, что параметры у ссылок в письмах могут меняться..их может быть 2, 3 или не быть вообще

Считать параметры с URL у меня получилось, сделал ряд переменных:

const email = urlQueries['email'];
  const phone = urlQueries['phone'];
  const date = urlQueries['date'];
  const offer = urlQueries['offer'];
  const source = urlQueries['source'];
  const lang = urlQueries['lang'];
  const country = urlQueries['country'];

Где, например urlQueries['lang'] отдает ua

То есть - работает..сама задача - сгенерировать ссылку на страницу регистрации

Вот это - у меня работает - но явно не лучший подход, так как параметров может быть много

<a href={location.pathname + lang && `&lang=${lang}`}>
     Открыть страницу
</a>

Я так понимаю - ссылка должна быть такая:

<Link
                to={{
                  pathname: '/signup',
                  query: {
                    lang: lang,
                    source: source,
                    offer: offer,
                    country: country,
                  },
                }}
              >
                Button
              </Link>

Только это почему-то не сработало(

Comments

[YavaDev]

location.search

[WbICHA]

Вообще-то для передачи данных из одного компонента в другой есть куда более цивилизованные методы.

[TheOnlyFastCoder2]

WbICHA, как всегда ничего полезного и не сказал , сморозил или сделал какую то херню и ушел . Даже не помог

[WbICHA]

TheOnlyFastCoder2, "ваше мнение очень важно для нас". Вот серьёзно, "эксперт по костылям" меня ещё учить будет что можно писать, а что нет.
Ах, да, отличная ссылка на почту.)

Answer 1

[Александр Осадчий]

В итоге - вот мое рабочее решение:

Импотрируем Link и useLocation

import { Link, useLocation } from 'react-router-dom';

Далее - внутри компонента:
Константа поиска:
const { search } = useLocation();

Константа с параметрами:

const params = {
    lang: lang,
    source: source,
    offer: offer,
  };

Константа с ссылкой (по дефорлту):
const to = {
pathname: '/signup'
}

Затем - сканируем строку на наличие параметров:

if (search !== '') {
    to['search'] = queryString.stringify(params);
  } else {
    to['search'] = `lang=${lang}`;
  }

ну и сама кнопка:
<Link to={to}>Button</Link>

И это отлично работает!!!

P.S Собрал на основе этого: https://stackblitz.com/edit/dynamic-router-links

Comments

[TheOnlyFastCoder2]

альтернатива моего кода

Answer 2

[TheOnlyFastCoder2]

(Изменил ответ)
//index.js

import React from "react";
import { render } from "react-dom";

// import react router
import { BrowserRouter, Link } from "react-router-dom";
import toLinkParams from "./toLinkParams";

const params = {
  pathname: "/signup",
  search: toLinkParams({
    lang: "ua",
    source: "3",
    offer: 1,
    country: "ua"
  })
};

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Link to={params}>Button</Link>
    </div>
  </BrowserRouter>
);

render(<App />, document.getElementById("root"));

//toLinkParams.js

export default function toLinkParams(params) {
  return (
    "?" +
    Object.entries(params)
      .map((param) => {
        const [key, value] = param;
        return `${key}=${value}`;
      })
      .join("&")
  );
}

Comments

[Александр Осадчий]

Блин, в nexts с import Link from 'next/link' это работает, а в react - нет(

[Александр Осадчий]

Вот демонстрация - ссылка не принимает параметры((

https://codesandbox.io/s/ancient-hooks-v45pe?file=...

[TheOnlyFastCoder2]

Александр Осадчий, попробуйте сделать так : https://codesandbox.io/s/nostalgic-lumiere-xjotv