Reactjs 如何从当前路由中删除查询参数？

我有一个

/cart

路由，它接受两个名为

validate

和

email

的查询参数。它们仅在用户未登录时使用，在用户登录时不需要。在后一种情况下，我想从URL中删除它们

这是我当前的

onEnter

功能，用于

/cart

路线：

const requireCartLogin = (props, replace) => {
    const { email, validate } = props.location.query;

    // Exit process if the 'validate' query isn’t present.
    if (typeof validate === 'undefined') { return; }

    if (!isAuthenticated() || requiresReauthentication()) {
        replace({
            pathname: '/account/signin',
            query: { step: 'signin' },
            state: {
                email: typeof email !== 'undefined' ? email : null,
                auth: true,
                next: '/cart'
            }
        });
    } else if (isAuthenticated()) {
        replace({
            pathname: '/cart',
            query: null
        });
    }
};

---

条件的第二部分应该删除查询参数，但它当前不起作用。我在这里遗漏了什么？

看看迪米特里·杜申的作品

创建如下2个实用程序函数：

import { browserHistory } from 'react-router';

/**
 * @param {Object} query
 */
export const addQuery = (query) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());

  Object.assign(location.query, query);
  // or simple replace location.query if you want to completely change params

  browserHistory.push(location);
};

/**
 * @param {...String} queryNames
 */
export const removeQuery = (...queryNames) => {
  const location = Object.assign({}, browserHistory.getCurrentLocation());
  queryNames.forEach(q => delete location.query[q]);
  browserHistory.push(location);
};

并使用它来操作查询，如下图所示：

import { withRouter } from 'react-router';
import { addQuery, removeQuery } from '../../utils/utils-router';

function SomeComponent({ location }) {
  return <div style={{ backgroundColor: location.query.paintRed ? '#f00' : '#fff' }}>
    <button onClick={ () => addQuery({ paintRed: 1 })}>Paint red</button>
    <button onClick={ () => removeQuery('paintRed')}>Paint white</button>
  </div>;
}

export default withRouter(SomeComponent);

从“react router”导入{withRouter}；
从“../../utils/utils路由器”导入{addQuery，removeQuery}；
函数SomeComponent（{location}）{
返回
addQuery（{paintRed:1}）}>paintRed
removeQuery（'paintRed'）}>PaintWhite
;
}
使用路由器导出默认值（SomeComponent）；

请注意，假设

react-router-dom

删除是最棘手的部分，因此首先需要能够以合理的格式获取当前参数

您可以通过

useLocation

hook以字符串形式获取搜索参数

但是像这样处理字符串是令人困惑的，我更喜欢处理对象

例如，

？filter=123&filter=something&page=1

将生成以下对象

{
过滤器：['123'，'something']，
页码：['1']
}

更容易操作

因此，我们应该创建两个实用函数，一个用于将搜索字符串转换为上述对象，另一个用于将对象转换回搜索字符串

toParamObject.js

constTopAramObject=（queryString）=>{
const params=新的URLSearchParams（queryString）；
设paramObject={}；
参数forEach（（值，键）=>{
if（参数对象[键]）{
参数对象={
…对象，
[钥匙]：[
…参数对象[键]，
价值
],
};
}否则{
参数对象={
…对象，
[键]：[值]，
};
}
});
返回参数对象；
};

toQueryString.js

consttoquerystring=（paramObject）=>{
让queryString=''；
Object.entries（paramObject.forEach）（[paramKey，paramValue]）=>{
如果（paramValue.length==0）{
返回；
}
queryString+='？'；
paramValue.forEach（（值，索引）=>{
如果（索引>0）{
查询字符串+='&'；
}
queryString+=`${paramKey}=${value}`；
});
});
//这有点骇人，但如果我们按“路线”走，我们就输了
//我们的页面、基本路径等。
//因此，按“？”只会删除所有当前查询字符串
返回查询字符串！=''查询字符串：'？'；
};

得到

//搜索来自useLocation，我们只需输入所需参数的名称即可
const get=（key）=>toParamObject（search）[key]| |[]；

去除

---

我搜索了一段时间，了解了如何做到这一点，最终意识到我需要做的只是像平常一样使用历史记录推送到url（没有参数）：

---

您是否有

replace

功能的代码？你能把它粘贴到这里吗？@ChetanJadhavCD-这只是react路由器历史API的一部分：你使用的是哪个版本的

react router

？我使用的是

3.0.4

。

const remove = (key, value) => {
    // First get the current params get()
    const thisParam = get(param).filter((val) => val !== value);
    const newParamObject = {
      ...toParamObject(search), // from useLocation
      [param]: thisParam,
    };
    push(`${toQueryString(newParamObject)}`); // from useHistory
};

// this piece of code is in /app/settings/account
React.useEffect(() => {

        let params = queryString.parse(location.search)
        if (params && params.code) {
            doSomething(params.code)                                                            
            history.push('/app/settings/account')           
        }
    
}, [])