hide id or query string while passing through react router

Question

i am having route where i pass id,but i dont want to show id in url,

`<Route path={`${match.url}invite-members/:groupID`} exact component={InviteMembers} />`

this gets converted in url https://local..../invite-members/5, but instead of that i want https://local..../invite-members, but the functionality should remain the same as in i get id in invite-members through this.props.match.params.groupID should be as it is,please help

using react router "react-router-dom": "^4.2.2",

Answer 1

If you want to change url to '/invite-members', you can add the Redirect component. And in case you want to save groupId, you could save it to your component state:

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import {
  Router,
  Route,
  Link,
  Switch,
  Redirect
} from "react-router-dom";

class Root extends PureComponent {
  // add groupId field to your component
  // In case you use redux or any another state management library, you can save groupId to store
  state = { groupId: null };
  render() {
    const { store, history } = this.props;
    // just for example I defined '/' path to redirect on /invite-members url
    return (
        <Router>
          <Switch>
            <Route
              path="/"
              exact
              render={props => (
                <Redirect
                  to={{
                    pathname: "/invite-members/123",
                    state: { from: props.location }
                  }}
                />
              )}
            />
            <Route
              path="/invite-members"
              exact
              render={props => (
                <InviteMembers {...props} groupId={this.state.groupId} />
              )}
            />
            <Route
              path="/invite-members/:groupID"
              exact
              render={props => {
                return (
                  <RedirectAndSaveGroupId
                    {...props}
                    groupId={props.match.params.groupID}
                    onSetGroupId={groupId => {
                      this.setState({ groupId });
                    }}
                  />
                );
              }}
            />
          </Switch>
        </Router>
    );
  }
}

export default Root;

class RedirectAndSaveGroupId extends PureComponent {
  componentDidMount() {
    // save groupId to Root component
    this.props.onSetGroupId(this.props.groupId);
  }

  render() {
    // redirect to /invite-members without groupId
    return (
      <Redirect
        to={{
          pathname: "/invite-members",
          state: { from: this.props.location }
        }}
      />
    );
  }
}

// Just for demo. In this.props.groupId we can receive groupId
class InviteMembers extends PureComponent {
  render() {
    return this.props.groupId;
  }
}

Note, that in case you using any state management library such as Redux, you can store group id in them

Answer 2

Passing data in the params object will always result in that data being shown in the URL. Because the params object is built from the url.

Answer 3

I maybe have a very simple solution :

Router link :

 <Link to={{pathname: '/item/'+name, state : {id}}}>{name}</Link>

In the Targeted file :

 state = this.props.location.state

 QueryParameters = () => {
     const id = this.state.id
     return { id }
  }

And launch your query requiring the ID. It does not appear in the url.