如何在不刷新 Next JS (React) 中的页面的情况下删除或更新查询参数？
/about?login=success&something=yes?login=success&something=yes从 URL 中删除而不刷新页面。单击按钮后的 URL 将是/about我怎样才能实现它？
正如在这个线程中提到的，我知道可以使用路由器删除查询参数或查询字符串。但是，useLocation并且useHistory在 上不可用next/router。
您可以使用next/router删除或更新 URL 中的查询参数。
const router = useRouter();
router.replace('/about', undefined, { shallow: true });
使用replace以防止增加新的网址进入历史（否则只是使用push），并shallow: true允许您更改URL而不运行数据获取方法。这将导致重新渲染，但不会刷新页面本身。
我对类似问题的解决方案是这样的：
push(`${asPath.split('?')[0]}?comp=${id}`);
或者如果你想有可重用的功能：
function delQuery(asPath) {
return asPath.split('?')[0]
}
...
const {push, asPath} = useRouter()
push(`${delQuery(asPath)}?comp=${id}`);
Nextjs 具有useRouter钩子，可用于以编程方式更改 url。
链接到文档。
根据History，您可以使用history.replaceState来实现这一点。
window.history.replaceState(null, '', '/about')
如果您想从查询中删除单个或多个参数，
const router = useRouter();
/**
* If removeList is empty, the function removes all params from url.
* @param {*} router
* @param {*} removeList
*/
const removeQueryParamsFromRouter = (router, removeList = []) => {
if (removeList.length > 0) {
removeList.forEach((param) => delete router.query[param]);
} else {
// Remove all
Object.keys(object).forEach((param) => delete object[param]);
}
router.replace(
{
pathname: router.pathname,
query: router.query
},
undefined,
/**
* Do not refresh the page
*/
{ shallow: true }
);
};
const anyFunction = () => {
// "/about?firstParam=5&secondParam=10"
removeQueryParamsFromRouter(router, ['myParam']);
// "/about?secondParam=10"
};