Append 文本輸入到 URL 在 React

Question

我正在嘗試 append 一個文本值到以下“http://3-10.cetecerpdevel.com:3101/customer/list_new”中來自“？external_key=blabla”的TextFilter。 所以換句話說，http://3-10.cetecerpdevel.com:3101/customer/list_new?external_key=blabla。 我看過做 react-router 但它似乎不適合我正在做的事情，我嘗試了 URLSearchParams。 下面的代碼是我正在使用的代碼片段。 你會怎么做？

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"
                            /

Answer 1

只需您可以使用useHistory來執行此操作：

const history = useHistory();

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

搜索中的任何內容都將 append 到 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
});
        }
    }