Question

点击链接传递查询字符串参数并在另一页面上读取它然后我正在做我的逻辑。但我想隐藏URL中的查询字符串。这是传递参数的方式

<Link  to={{ pathname: '/user', query: { id: this.props.id } }} > User List </Link>

Answer 1

以编程方式在react-router中导航，同时隐藏查询字符串参数

注意第二个参数采用参数对象。在组件中使用以下内容：

this.context.transitionTo("route", { search: this.state.search, type: this.state.type });

我们需要使用基于类的组件语法来访问 this 关键字。例如：

import React from 'react';

export default class CustomLink extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo("route", { search: this.state.search, type: this.state.type });
  }

  render(){
    return (<div onClick={this.handleClick}>Click</div>);
  }
}

customLink.contextTypes = {
  router: React.PropTypes.func.isRequired
};

如何在ReactJS react-router中隐藏查询字符串参数

1 个答案: