javascript - 在 react-router 渲染函数中访问 URL 参数

Question

这是一个快速的问题，但到目前为止我还没有找到解决方案:

我想使用 render 方法访问 react-router v4 的 URL 参数。到目前为止，我发现的所有内容都只是像这样传递组件:

<Route path="/:id" component={Child} />

但是我想像这样使用渲染方法:

<Route path="/:id" render={() => (<Wrapper> <Child /> </Wrapper>)} />

然而，match当我尝试访问 id 时 prop 未定义参数与 props.match.params.id在我的 Child组件。

知道如何使用渲染函数并仍然访问 url 参数吗？

Answer 1

您需要将 props 从 Route 传递给 Child:

<Route path="/:id" render={(props) => (<Wrapper> <Child {...props} /> </Wrapper>)} />

或:

<Route path="/:id" render={(props) => (<Wrapper> <Child id={props.match.params.id} /> </Wrapper>)} />