Question

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

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

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

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

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

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

知道如何使用渲染功能并仍然可以访问url参数吗？

Answer 1

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

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

或：

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

Answer 2

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

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

在react-router渲染函数

2 个答案: