Скрыть идентификатор или строку запроса при прохождении через реагирующий маршрутизатор

Question

У меня есть маршрут, где я передаю идентификатор, но я не хочу показывать идентификатор в URL,

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

это конвертируется в URL https:/invite-members/5, но вместо этого я хочу https:/invite-members, но функциональность должна оставаться такой же, как в я получаю идентификатор в приглашениях через this.props.match.params.groupID должно быть как есть, помогите пожалуйста

используя реагирующий маршрутизатор "react-router-dom": "^4.2.2",

Answer 1

Возможно, у меня есть очень простое решение:

Ссылка на маршрутизатор:

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

В целевом файле:

 state = this.props.location.state

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

И запустите свой запрос, требующий ID. Он не отображается в URL-адресе.

Answer 2

Если вы хотите изменить URL-адрес на "/ Invite-members", вы можете добавить компонент Redirect. И в случае, если вы хотите сохранить groupId, вы можете сохранить его в состояние вашего компонента:

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

Обратите внимание, что если вы используете какую-либо библиотеку управления состоянием, такую ​​как Redux, вы можете хранить в них идентификатор группы

Answer 3

Передача данных в params Объект всегда приводит к тому, что эти данные отображаются в URL. Поскольку params Объект построен из URL.