Question

无法访问路径参数

2019-07-27

426

reactjs react-router-v4 react-router-dom

我有以下内容：

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

现在在房间组件中，如果我 console.log(this.props)。我可以访问 roomId 参数。但是，在 Sidebar 组件中，我无法访问 roomId 参数。如果我 console.log(this.props)，我的位置和匹配道具如下所示：

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

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

您知道会发生什么吗？提前谢谢您！

Answer 1

您只能在 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 2

您可以在 RoomComponent 中定义状态变量 roomId ，例如

constructor(props){
super(props);

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

然后将此值作为 props 传递给您的 SidebarComponent ，以便它可以访问该值。

<SidebarComponent
   roomId = this.state.roomid
/>

Answer 3

react-router-dom 正在传递这些 props：History、Location、Match。

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