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

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

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

В письме ссылка на кнопке примерно такого вида:
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>

Только это почему-то не сработало(
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
DELUX
@DELUX Автор вопроса
В итоге - вот мое рабочее решение:

Импотрируем 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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("&")
  );
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы