如何从当前路由中删除查询参数? [英] How do you remove query params from the current route?

问题描述

我有一个 /cart 路由，它接受一些名为 validate 和 email 的查询参数.它们仅在用户未登录时使用，并且在用户登录时是不必要的.在后一种情况下，我想从 URL 中删除它们.

这是我当前用于 /cart 路线的 onEnter 函数:

const requireCartLogin = (props, replace) =>{const { 电子邮件，验证 } = props.location.query;//如果validate"查询不存在，则退出进程.如果(类型验证 === '未定义'){ 返回；}if (!isAuthenticated() || requiresReauthentication()) {代替({路径名:'/帐户/登录'，查询:{步骤:'登录'}，状态: {email: typeof email !== 'undefined' ?电子邮件:空，身份验证:真实，下一个:'/购物车'}});} else if (isAuthenticated()) {代替({路径名:'/购物车'，查询:空});}};

条件的第二部分应该删除查询参数，但它目前不起作用.我在这里错过了什么?

解决方案

看看 Dimitry Dushin 的 示例

像这样创建 2 个实用函数:

import { browserHistory } from 'react-router';/*** @param {Object} 查询*/导出 const addQuery = (查询) =>{const location = Object.assign({}, browserHistory.getCurrentLocation());Object.assign(location.query, query);//或者简单的替换 location.query 如果你想完全改变参数browserHistory.push(location);};/*** @param {...String} 查询名称*/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 }) {返回 
;}导出默认 withRouter(SomeComponent);

请注意，这在 react-router 的 >v4 中不起作用.

I have a /cart route that accepts a couple of query params called validate and email. They’re only used when a user isn’t logged in and are unnecessary when they are. In the latter case I would like to remove them from the URL.

This is my current onEnter function for the /cart route:

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

It’s that second part of the conditional that should be removing the query params, but it isn’t currently working. What am I missing here?

解决方案

Have a look at Dimitry Dushin's example

Create 2 utility functions like this:

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

And use it to manipulate the query as in the example shown below:

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

Note that this will not work in >v4 of react-router.

这篇关于如何从当前路由中删除查询参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！