Блог

Главная - Вопросы по программированию - В React Как передать идентификатор другому компоненту класса страницы

В React Как передать идентификатор другому компоненту класса страницы

#reactjs #react-router-dom

Вопрос:

Мне нужно передать идентификатор на другую страницу с помощью компонентов класса. this.props.match.params.group_Id возвращает неопределенный.Вот мой код

 #page1
<Link to={"/GroupsDetail.js/?group_Id=" item.group_Id}}>Details</Link>

 #page2

submit() {
        let Id= this.props.match.params.group_Id;
        console.log(Id);
        let url = 'http://localhost:0000/api/Group/GroupDetailsDisplay?group_Id=' Id;
}

Нужно передать этот идентификатор в API.Пожалуйста, поделитесь своей идеей. Спасибо

Ответ №1:

 const url = new URL(window.location.href);
const Id = url.searchParams.get("group_Id");

Комментарии:

1. Спасибо @Mohaimin. Это работает. Он работает только в локальном хранилище ?

2. @Vijayaasri вы имеете в виду «локальный хост»?

Ответ №2:

react-router-dom обрабатывает только части пути URL-адреса, он ничего не делает с параметром queryString, кроме как включает их в объект location.

Местоположения показывают, где приложение находится сейчас, куда вы хотите его отправить или даже где оно было. Это выглядит так:

 {
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

Получите доступ к location реквизиту и передайте search свойство новому URLSearchParams для анализа строки запроса.

 submit() {
  const { location } = this.props;
  const query = new URLSearchParams(location.search);

  const Id = query.get('group_Id');;
  console.log(Id);
  let url = 'http://localhost:0000/api/Group/GroupDetailsDisplay?group_Id=' Id;
}

Если вы хотите сохранить идентификатор группы в параметрах соответствия маршрута , вам нужно будет определить путь маршрута как path="/GroupsDetail.js/:Id" и связать его как <Link to={`/GroupsDetail.js/${item.group_Id}`}>Details</Link> .

Метки: