使用 react-router-relay 访问要在查询中使用的 url 参数

Posted 2023-03-08

【中文标题】使用 react-router-relay 访问要在查询中使用的 url 参数

【英文标题】：Accessing a url parameter to use in a query using react-router-relay

【发布时间】：2017-01-23 18:42:26

【问题描述】：

我正在使用 react-router 和 react-router-relay 来处理我的应用程序上的路由。我在尝试访问在 url 路径中传递的 id 参数时遇到问题。这样做的正确方法是什么？

routes.js

import CreativeQuery from './CreativeQuery';

<Route path='/creative' component=CreativeComponent queries=ViewerQuery>
<Route path="/creative/edit/:id" component=CreativeEditComponent queries=CreativeQuery/>

CreativeQuery.js

import Relay from 'react-relay';

export default 
  creative: (Component) => Relay.QL`
    query 
      creative(id:$id)  #<--- id from the url param
        $Component.getFragment('creative')
      
    
  `
;

【参考方案1】：

应该这么简单：

import Relay from 'react-relay';

export default 
  creative: () => Relay.QL`query  creative(id: $id)  `
;

然后您可以通过组件的this.props 访问id。