reactjs - 无法访问路径参数

Question

我有以下内容:

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

现在在房间组件内，如果我console.log(this.props)。我可以访问 roomId 参数。但是，在侧边栏组件内，我无权访问 roomId 参数。如果我 console.log(this.props)，我的位置和匹配 Prop 如下所示:

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

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

你知道会发生什么吗？预先感谢您!

Answer 1

您只能在您的 Route 组件 及其子级(如果使用 withRouter 封装)中访问该信息。

您可以做的是使用 Route 与 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"
//  }