Reactjs создает URL с другой частью строки

Question

Я хочу добиться чего-то подобного. Если я введу данные, как это раньше,

const partofurls = {
  protocol: 'https',
  host: 'hosturl',
  port: 8080,
  endpoint: 'someendpoint',
  queryparams: {
    key1:value1,
    key2:value2
  }
}

Я хочу получить URL-адрес как показано ниже

https://hosturl:8080/endpoint?key1=value1&key2=value2

В javascript или реагировать, есть ли способ достичь этого?

Я получаю эти поля от пользователя. Если пользователь добавил косую черту '/' в конце hosturl и если он также добавил '/' в начале конечной точки, то я получу две косые черты между hosturl и конечной точкой. Подобно этому, есть много других случаев.

Чтобы решить все эти проблемы, существует ли какой-либо стандартный модуль или библиотека вactjs или javascript?

Answer 1

Вы можете построить что-то вроде этого

const urlObj = {
  protocol: 'https',
  host: 'hosturl',
  port: 8080,
  endpoint: 'someendpoint',
  queryparams: {
    key1: 'value1',
    key2: 'value2'
  }
}

let { protocol, host, port, endpoint, queryparams } = urlObj
let encodeQuery = new URLSearchParams(queryparams).toString()

let url = `${protocol}://${host}:${port}/${endpoint}?${encodeQuery}`

console.log(url)

Answer 2

В Javascript вы можете попробовать следующее:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

и получить все параметры:

function getUrlParam(parameter, defaultvalue){
    var urlparameter = defaultvalue;
    if(window.location.href.indexOf(parameter) > -1){
        urlparameter = getUrlVars()[parameter];
        }
    return urlparameter;
}

А затем в реакции вы можете использовать маршрутизатор реакции

<Route 
 path="{url}"
 component={UserComponent} />

Например, userid - это параметр URL

class UserComponent extends React.Component{
 render(){
  let userId = this.props.match.params.userId;
  // rest of the code
 }

Вот как мы его используем:

import queryString from 'query-string';

class UserComponent extends React.Component{
 render(){
  // url is 'https://www.example.com/user?id=123&type=4';
  let url = this.props.location.search;
  let params = queryString.parse(url);
  console.log(params);
  // The result will be like below
  // { id: 123, type: 4 }
  // other code
 }
}

Answer 3

Попробуйте создать объект URL.

const u = new URL("http://www.test.com"); //dummy url
u.protocol = "https:";
u.hostname = "hosturl";
u.pathname = "/endpoint";
u.port = "8080"

searchParams = new URLSearchParams();
searchParams.append("key1", "value1");
searchParams.append("key2", "value2");

console.log(`${u}?${searchParams.toString()}`);
// https://hosturl:8080/endpoint?key1=value1&key2=value2

Для получения дополнительной информации https://developer.mozilla.org/en-US/docs/Web/API/URL