Question

我有以下内容：

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

您有什么想法，会发生什么？预先谢谢你！

Answer 1

可能侧边栏组件没有history，但是您可以更好地使用函数或库来解析url查询，我一直使用查询字符串的parse函数，这是一个示例：

withRouter

Answer 2

您可以像

一样在roomId中定义状态变量RoomComponent

constructor(props){
super(props);

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

，现在将此值作为道具传递给您的SidebarComponent，以便它可以访问此值。

<SidebarComponent
   roomId = this.state.roomid
/>

Answer 3

这是因为补充工具栏不是房间组件的子元素，它位于路由器外部，因此只会将根路径作为最接近的匹配项。

一种解决方案是将match对象保存到redux存储并通过状态获取它。

Answer 4

您只能在Route component及其后续子项（如果用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"
//  }

Answer 5

react-router-dom正在传递那些道具：历史，位置，比赛。

react-router只会将这些道具传递给Route内部实际使用的组件。这就是为什么RoomComponent可以访问那些道具，但是Sidebar组件无法访问的原因，因为Sidebar并未设置为Route的组件值。

无法访问路径参数

5 个答案: