我有以下几点:

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


现在在房间组件内部,如果我console.log(this.props)。我可以访问roomId参数。但是,在补充工具栏组件中,我无权访问roomId参数。如果我使用console.log(this.props),则我的位置和匹配道具如下所示:

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

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


你有什么想法,会发生什么?先感谢您!

最佳答案

您只能在Route component及其进一步的子级(如果用withRouter包裹)中访问该信息。

您可以做的是使用RoutematchPath相同的匹配代码:

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

10-05 20:41
查看更多