在 React 中将文本输入附加到 URL答案

【问题标题】：Append Text Input to URL in React在 React 中将文本输入附加到 URL
【发布时间】：2021-05-12 17:56:13
【问题描述】：

我正在尝试从“?external_key=blabla”的 TextFilter 中将文本值附加到以下“http://3-10.cetecerpdevel.com:3101/customer/list_new”。所以换句话说，http://3-10.cetecerpdevel.com:3101/customer/list_new?external_key=blabla。我看过做 react-router 但它似乎不适合我正在做的事情，我尝试了 URLSearchParams。下面的代码是我正在使用的 sn-ps。你会怎么做呢？

function OnChange(text){
        if (text === null) {
            console.log("Do nothing");
        } else {
            //append to url
            console.log("Hi")
            let url = new URL('https://example.com?foo=1&bar=2');

            let test = document.getElementById('ExternalKey');
            // just append a word to the url
            const blah = "blah";
            
            console.log("test",test);
        }
    }

...

<TextFilter
                                label="External Key"
                                urlText={OnChange()}
                                id="ExternalKey"
                                placeholder="Search External Key"
                                dataFieldName="me.external_key"
                                divClass="form-field column third"
                            /

【问题讨论】：

标签： javascript reactjs url react-router react-router-dom

【解决方案1】：

您只需使用useHistory 即可：

const history = useHistory();

history.push({
      pathname: "/",// Current Path
      search: "?color=blue"// Your Param needed
    });

搜索中的任何内容都会附加到 url...

function OnChange(text){
        if (text === null) {
            console.log("Do nothing");
        } else {
            history.push({
  pathname: "/",// Current Path
  search: "?foo=1&bar=2"// Your Param needed
});
        }
    }

【讨论】：