How to generate a link in React?

Question

React

Hello!

There is a separate landing page with a promotion - they can get to it from a letter.

In the letter, a link on a button looks like this:
site.com/bonus?offer=1&lang=ua&country=ua

And so, the person went to the landing page - there is a "Next" button and now it should take over the parameters from the current link (from the button)

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

The bottom line is that the parameters of the links in the letters can change .. there may be 2, 3 or not at all

. I managed to count the parameters from the URL, I made a number of variables:

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'];

Where, for example, it urlQueries['lang']gives ua

That is - it works .. the task itself is to generate a link to the registration page

Here it is - it works for me - but obviously not the best approach, since there can be a lot of parameters

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

As I understand it, the link should look like this:

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

It just didn't work for some reason

Answer 1

In the end - here is my working solution:
Importing Link and useLocation

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

Further - inside the component:
Search constant:
const { search } = useLocation();
Constant with parameters:

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

Constant with a link (by default):
const to = {
pathname: '/signup'
}
Then - scan the string for parameters:

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

well, the button itself: And it works great!!! PS Collected based on this: https://stackblitz.com/edit/dynamic-router-links
<Link to={to}>Button</Link>

Answer 2

(Changed answer)
//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("&")
  );
}