как изменить маршрут и передать аргументы в релейный контейнер?

Я воспользовался react-relay-starter-kit, предоставленным FaceBook, для создания простого приложения. с двумя маршрутами.

Но теперь я хочу, чтобы компонент одного маршрута вызывал другой маршрут, передавая параметр фрагменту этого контейнера.
Другими словами, у меня есть: < br/>
Конфигурация роутера:

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')
);


Комп1:

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    
                }
            `}}
});

Я не мог понять, как передать значение второму маршрутизатору.


reactjs react-router graphql relay
person tahayk    schedule 01.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы все сделали правильно, у вашего 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

person crumb    schedule 01.11.2016
comment
Спасибо за подсказку, у меня это сработало с этим кодом: hashHistory.push({ pathname: '/home', query: { modal: true }, state: { maValue: true } }); но в Relay.createContainer я не могу получить к нему доступ, вы знаете способ получить доступ к переданному значению в контейнер Relay? - person tahayk; 02.11.2016