如何在反应中推送和用于此页面的查询参数？

如何解决如何在反应中推送和用于此页面的查询参数？

我从教程中找到了这个代码库。我正在尝试从分页 API 中获取数据。

问题是这里似乎没有使用 react-router。

 const [hits,setHits] = useState([]);
     const [pageCount,setPageCount] = useState(1); #New
    const [isLoaded,setisLoaded] = useState(false);
    const [currentPage,setcurrentPage] = useState(0); #New
    const [query,setQuery] = useState('startups'); 

    const URL = `https://hn.algolia.com/api/v1/search?query=${query}&page=${currentPage}`;

    const handleFetch = () => {
        fetch(URL)
            .then(response => response.json())
            .then(body => {
                setData([...body.hits]);
                                setPageCount(body.nbPages); #New
                                setisLoaded(true); #New
            })
            .catch(error => console.error('Error',error));
    };

      #New
    const handlePageChange = (selectedobject) => {
        setcurrentPage(selectedobject.selected);
        handleFetch();
    };

return (
    <div>
         <label>Search</label>
        <input type="text" onChange={(event) => setQuery(event.target.value)} />
        <button onClick={handleFetch}>Get Data</button>

            {isLoaded ? (
                hits.map((item) => {
                    return (
                        <NewsCard
                            url={item.url}
                            title={item.title}
                            author={item.author}
                            key={item.objectID}
                        />
                    );
                })
            ) : (
                <div></div>
            )}    
                       #New
            {isLoaded ? (
                <ReactPaginate
                    pageCount={pageCount}
                    pageRange={2}
                    marginPagesdisplayed={2}
                    onPageChange={handlePageChange}
                    containerClassName={'container'}
                    prevIoUsLinkClassName={'page'}
                    breakClassName={'page'}
                    nextLinkClassName={'page'}
                    pageClassName={'page'}
                    disabledClassNae={'disabled'}
                    activeClassName={'active'}
                />
            ) : (
                <div>nothing to display</div>
            )} 

    </div>
);
  
}

如何在反应路由器中使用 currentPage 和 Query 作为查询参数，因此如果 URL 中没有任何查询或 currentPage 参数，则默认 currentPage 将为 1，并且无论何时更改查询或 currentPage URL 也将更新为 ' ？'查询参数如 https://example.com?currentPage=9&query=startup

解决方法

您可以使用 history 将查询参数推送到 url 中，

history.push(`/?currentPage=${currentPage}&query=${queryString}`)

查看此repository以了解有关历史

的更多信息