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

Question

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

我想访问URL参数与react-router v4使用渲染方法。到目前为止，我发现的一切只是像这样传递组件：

<代码>

但是我想使用这样的渲染方法：

<代码>

但是，当我尝试在我的子组件中使用props.match.params.id访问id参数时，匹配道具是未定义的。

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

Answer 1

您可以使用location.search在URL中获取该查询字符串，并从location.pathname

<Route
      path="/about"
      render={({ location, history }) => (
           <div>
                 <p>We are at: {location.pathname}</p>
                 <p>Query string is: {location.search}</p>
           </div>
      )}
/>

Answer 2

您需要将道具从Route传递到Child：

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

或：

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