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
});
        }
    }