如何更改路由并将参数传递给中继容器?

时间:2016-11-01 17:13:01

标签: reactjs react-router graphql relay

我按照FaceBook提供的react-relay-starter-kit来创建一个包含2条路线的简单应用程序。

但是现在我想让一条路线的组件在传递参数时调用另一条路线到这个容器的碎片。
换句话说,我有:

路由器配置:

Relay.injectNetworkLayer(
    new Relay.DefaultNetworkLayer(config.gqlUrl, {options...})
);

ReactDOM.render(
    <Router
        history={hashHistory}
        render={applyRouterMiddleware(useRelay)}
        routes={routes}
        environment={Relay.Store}>

        <Route path="/" component={App}/>
        <Route path="/route1" component={Comp1} />
        <Route path="/route2" component={Comp2} queries={comp2Query}/>
    </Router>,
    document.getElementById('root')
);


器Comp1:

export default class Comp1 extends React.Component {

    render() {
        return (    
         <div>
           <span onClick={()=>{//go to comp2 with val=1}>1</span>
           <span onClick={()=>{//go to comp2 with val=2}>2</span>
           <span onClick={()=>{//go to comp2 with val=3}>3</span>
         </div>
        );
    }
}


器Comp2:

class Comp2 extends React.Component {

    render() {
        return (    
         <div>
           {this.props.info.text}
         </div>
        );
    }
}

export default Relay.createContainer(Comp2, {
    initialVariables: {
        value: //the value set by the Comp1
    },
    fragments: {
        info: (variables) =>{               
            return Relay.QL`
                fragment on News{
                  text    
                }
            `}}
});

我无法找到将值传递给第二个路由器的方法。

1 个答案:

答案 0 :(得分:0)

如果你做的一切正确,你的Comp2应该有道具的历史。 您可以使用它在您的路线之间导航

this.props.history.pushState('/home', { some: 'state' })

另一种方法是使用context.router。创建Comp2类后添加

Comp2.contextTypes = {
    router: React.PropTypes.object
};

现在

this.context.router.push({
  pathname: '/home',
  query: { some: 'query' },
  state: { some: 'state' }
});

此处有更多信息:https://github.com/ReactTraining/react-router/blob/master/docs/API.md