CODEWITHSUNDEEP
reactjsreduxreact-router
Ramusesan
Ramusesan

Reputation: 904

How to hide Query string parameter in ReactJS react-router

On click of Link am passing query string parameter and am reading it on another page then am doing my logic. but I want to hide the query string from URL. this is how am passing parameters

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

Upvotes: 1

Views: 8857

Answers (1)

therewillbecode
therewillbecode

Reputation: 7180

Programmatically navigate in react-router whilst hiding query string parameters

Note the second argument takes an object of parameters. Use the following inside your component:

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

We need to use the class based component syntax to have access to the this keyword.For example:

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

Upvotes: 1

Related Questions