Question

这是我到目前为止所做的，

这是我为页面定义的路线

<Route path='emails/user/view/:id' component={AccountEmails} />

这里是渲染Component的地方

const AccountEmails = ({params: {id}}) => <ReceiptsListBox url={"/api/accounts/"+id+"/receipts.json"}></ReceiptsListBox>

现在，在组件的render()方法中，我尝试console.log(this.props.location.query)，但遗憾的是this.props.location未定义。

以下是我提到过的YouTube video。

react-router版本2.8.1并反应版本15.3.2

Answer 1

使用此：

const AccountEmails = props => {
    const {id} = props.params;
    return  <ReceiptsListBox 
                url={"/api/accounts/"+id+"/receipts.json"} 

                {...props}       // =====> notice this part, important

            </ReceiptsListBox>
}

原因是：您只传递道具中的网址，而不是AccountEmails从路由收到的所有道具值，因为location在{{{}}内不可用1}}组件。

解决方案会传递ReceiptsListBox组件收到的所有道具以及一个额外的网址值，这样AccountEmails组件中就可以使用location。

无法访问React组件内的查询字符串参数

1 个答案: