Не удалось получить доступ к параметрам пути

У меня есть следующее:

<BrowserRouter>
   <Sidebar>
   <Switch>
       <Route path='room/:roomId' component = {RoomComponent}/>
   </Switch>
</BrowserRouter>

Теперь внутри компонента комнаты, если я использую console.info(this.props). У меня есть доступ к параметру roomId. Однако внутри компонента боковой панели у меня нет доступа к параметру roomId. Если я использую console.info(this.props), мое местоположение и соответствующие реквизиты выглядят следующим образом:

    location:
       hash: ""
       key: "6qujt0"
       pathname: "/room/asdf3/"
       search: ""
       state: undefined

    match:
       isExact: false
       params:{}
       path: "/"
       url: "/"

У вас есть идеи, что может произойти? Заранее спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
3
0
267
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вероятно, компонент боковой панели не имеет withRouter, но вам лучше использовать функцию или библиотеку для анализа запросов URL, я всегда использую функцию разбора строки запроса, вот пример:

import * as qs from 'query-string';

const { search } = history.location;
const query = qs.parse(search, { ignoreQueryPrefix: true });
console.info(query.roomId);

Привет, Хосе, боковая панель завернута в withRouter, поэтому у меня есть доступ к сопоставлению и реквизитам местоположения. но объект params пуст. Разве проанализированные параметры пути не являются функциональностью, предоставляемой reac-router-v4? Почему у меня есть доступ к ним внутри RoomComponent? Спасибо за помощь

Antuan 27.07.2019 03:32

вы можете определить переменную состояния roomId в своем RoomComponent лайке

constructor(props){
super(props);

 this.state = {
    roomid: this.props.params.match.roomId
    }
}

и теперь передайте это значение вашему SidebarComponent в качестве реквизита, чтобы он мог получить доступ к этому значению.

<SidebarComponent
   roomId = this.state.roomid
/>

Это потому, что боковая панель не является дочерним элементом компонента комнаты, она находится за пределами маршрутизатора, она получит только корневой путь как наиболее близкое совпадение.

Одним из решений будет сохранение объекта match в хранилище избыточности и получение его через состояние.

Ответ принят как подходящий

Вы можете получить доступ к этой информации только внутри вашего Routecomponent и его последующих дочерних элементов (если они заключены в withRouter).

Что вы можете сделать, так это использовать тот же код соответствия, который Route использует с Путь к совпадению:

// inside your Sidebar component

import { matchPath } from "react-router";

const match = matchPath(this.props.location.pathname, {
  path: "/room/:roomId",
  exact: false,
  strict: false
});

// match should be:
//  {
//    isExact: false
//    params: {
//        roomId: "asdf3"
//    }
//    path: "/room/:roomId"
//    url: "/room/asdf3"
//  } 

react-router-dom передает эти реквизиты: History, Location, Match.

react-router будет передавать эти реквизиты только тем компонентам, которые фактически используются внутри маршрута. Вот почему RoomComponent имеет доступ к этим реквизитам, однако компонент боковой панели не будет иметь доступа, потому что боковая панель не была настроена как значение компонента для маршрута.

Другие вопросы по теме