NEXT JS - 如何删除查询参数？

Question

如何在不刷新 Next JS (React) 中的页面的情况下删除或更新查询参数？

1. 用户在 URL 上 /about?login=success&something=yes
2. 单击按钮并?login=success&something=yes从 URL 中删除而不刷新页面。单击按钮后的 URL 将是/about

我怎样才能实现它？

正如这个线程中提到的，我知道可以使用路由器删除查询参数或查询字符串。但是，useLocation并且useHistory在 上不可用next/router。

Answer 1

const router = useRouter();

router.replace("/about", undefined, { shallow: true });

使用replace以防止增加新的网址进入历史（否则只是使用push），并shallow: true允许您更改URL而不运行数据获取方法。这将导致重新渲染，但不会刷新页面本身。

Answer 2

根据历史记录，您可以使用history.replaceState来实现这一点。

window.history.replaceState(null, '', '/about')

Answer 3

我对类似问题的解决方案是这样的：

push(`${asPath.split('?')[0]}?comp=${id}`);

或者如果你想有可重用的功能：

function delQuery(asPath) {
  return asPath.split('?')[0]
}

...
const {push, asPath} = useRouter()

push(`${delQuery(asPath)}?comp=${id}`);

Answer 4

您通常希望keep pathname and all other query params在删除一个特定查询参数（在示例中shouldRefetchUser）时进行相同的操作，您可以这样做：

const router = useRouter()
const { pathname, query } = router
delete router.query.shouldRefetchUser
router.replace({ pathname, query }, undefined, { shallow: true })

（@juliomalves 的升级答案）

Answer 5

如果您想从查询中删除单个或多个参数，

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(router.query).forEach((param) => delete router.query[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"
};