У меня есть следующее:
<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: "/"
У вас есть идеи, что может произойти? Заранее спасибо!





Вероятно, компонент боковой панели не имеет withRouter, но вам лучше использовать функцию или библиотеку для анализа запросов URL, я всегда использую функцию разбора строки запроса, вот пример:
import * as qs from 'query-string';
const { search } = history.location;
const query = qs.parse(search, { ignoreQueryPrefix: true });
console.info(query.roomId);
вы можете определить переменную состояния 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 имеет доступ к этим реквизитам, однако компонент боковой панели не будет иметь доступа, потому что боковая панель не была настроена как значение компонента для маршрута.
Привет, Хосе, боковая панель завернута в withRouter, поэтому у меня есть доступ к сопоставлению и реквизитам местоположения. но объект params пуст. Разве проанализированные параметры пути не являются функциональностью, предоставляемой reac-router-v4? Почему у меня есть доступ к ним внутри RoomComponent? Спасибо за помощь