How to hide Query string parameter in ReactJS react-router

Question

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>

this is how am passing params User List <Link to={{ pathname: '/details', query: { id: this.props.id } }} > More Details... </Link> — Ramusesan
– Ramusesan, Commented Feb 7, 2017 at 12:16
Basically you cannot hide the query strings from the url.You can store somewhere to use it but url the only option where you can pass query parameters to receive in another page. — SatyaDash
– SatyaDash, Commented Feb 7, 2017 at 12:41
for example if i the query string will appear like this at URL xxxxx ?id=1001 then some one can hit 1002 can check details of 1002 's also right . how to protect — Ramusesan
– Ramusesan, Commented Feb 7, 2017 at 12:47
Then do one thing.Mix the id with some random characters which u know how to mix and that cannot be easily extracted.So it is like adding a hash in password.You can do that if you want that much security.Otherwise different tabs cannot show different content if you save that id some where else. — SatyaDash
– SatyaDash, Commented Feb 7, 2017 at 12:52
If the goal is to keep the query parameters private then how is adding random characters on the front end going to achieve that when anyone can see what these random characters are? — therewillbecode
– therewillbecode, Commented Feb 7, 2017 at 12:55

therewillbecode · Accepted Answer · 2017-02-09 10:17:07Z

1

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

edited Feb 9, 2017 at 10:17

answered Feb 7, 2017 at 12:37

therewillbecode

7,1984 gold badges38 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ramusesan Over a year ago

i imported already browser history package like this . import { Router, Route, browserHistory} from 'react-router';

Ramusesan Over a year ago

Should i give inside <Link to= ""> </Link> or render function of class/component

therewillbecode Over a year ago

Again, see updated answer. Link is a react-router component and therefore wont have this custom functionality.

Ramusesan Over a year ago

Uncaught TypeError: Cannot read property 'transitionTo' of undefined

therewillbecode Over a year ago

Ensure that the name of the component is accurate when setting contextTypes. i.e if your component is called customLink then use customLink.contextTypes = ...

Collectives™ on Stack Overflow

How to hide Query string parameter in ReactJS react-router

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related