无法访问路径参数

您只能在 Route component 以及它的后代(如果包裹着 withRouter

你能做的就是使用相同的匹配代码 路线 matchPath :

// 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"
//  } 

您可以定义状态变量 roomId 在你的 RoomComponent 喜欢

constructor(props){
super(props);

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

SidebarComponent

<SidebarComponent
   roomId = this.state.roomid
/>

react路由器dom正在传递这些属性:历史、位置、匹配。

react router只会将这些道具传递给路由中实际使用的组件。这就是为什么RoomComponent可以访问这些道具,但是侧边栏组件不能访问,因为侧边栏没有设置为路由的组件值。

可能侧栏组件没有 withRouter ,但您可以更好地使用函数或库来解析url查询,我总是使用查询字符串的parse函数,下面是一个示例:

import * as qs from 'query-string';

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

这是因为侧边栏不是room组件的子级,它位于路由器的外部,它只会获得最接近匹配的根路径。

match 对象,并使其通过状态。