我有以下几点:
<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
包裹)中访问该信息。
您可以做的是使用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"
// }