无法访问路径参数

Question

我有以下内容：

<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

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

import * as qs from 'query-string';

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

Answer 2

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

constructor(props){
super(props);

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

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

<SidebarComponent
   roomId = this.state.roomid
/>

Answer 3

那是因为 Sidebar 不是房间组件的子组件，它位于路由器之外，它只会获取根路径作为最接近的匹配项。

一个解决方案是将 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 只会将这些 props 传递给 Route 中实际使用的组件。这就是为什么 RoomComponent 可以访问这些 props 但 Sidebar 组件无法访问的原因，因为 Sidebar 没有设置为 Route 的组件值。

无法访问路径参数

Unable to access path params

reactjs

react-router-v4

react-router-dom