2015-08-19 3 views
2

Я пытаюсь передать маршрутизатор через контекст, поэтому я могу вызвать navigateTo на дочерний React.Component.Передайте маршрутизатор дочерним компонентам через контекст

Назначение:
Мне нужно перейти от входа в систему, когда у меня есть успешный логин.
Стратегия:
1. Парольный маршрутизатор для подключения к дочернему компоненту.
2. После успешного входа в систему login navigateTo ('/ startpage') передается маршрутизатор.

У меня есть это на странице/компонент, который содержит Run:

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
}); 

Следующая настройка контекста:

getChildContext() { 
    return { 
     router: Router 
    }; 
} 

и это для childContextTypes:

childContextTypes = { 
    router: React.PropTypes.object.isRequired 
}; 

И для самого ребенка:

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

Настройка контекста работает нормально, если я использую "router: React.PropTypes.string.isRequired". Примечание строки, но при использовании объекта я получаю:

Но когда я пытаюсь использовать объект я получаю ошибки:

Warning: Failed Context Types: Invalid context 'router' of type 'object' supplied to 'NavItemLink', expected 'function'. Check the render method of

и:

Uncaught TypeError: this.context.router.isActive is not a function

Любая помощь приветствовать?

+0

Вы можете разместить действующие маршруты? Вы думали о создании функции на родительском компоненте, таком как 'loginSuccessful()', который обрабатывает переход маршрутизатора и передает его дочернему компоненту через реквизиты? –

+0

Привет, Брэд. Да, это было именно то, что я сделал :-) Спасибо в любом случае. Я нажму на это как полезный - я не знаю, дает ли это какие-то вопросы, но все же. –

ответ

0

Решение, которое сработало для меня, состояло в том, чтобы создать функцию родителя и передать это с помощью контекста.

Родитель:

contextTypes = { 
     router: React.PropTypes.func.isRequired 
    }; 

и дочерних компонентов:

childContextTypes = { 
     router: React.PropTypes.func.isRequired 
    }; 
0

Если вы просто проходя по router, а затем посмотреть на оборачивать свой компонент в компоненте высшего порядка withRouter доступны starting in v2.4 ,

Многочисленные примеры в пределах react-router хранилища использовать это, вот один пример:

https://github.com/ReactTraining/react-router/blob/v2.8.1/examples/passing-props-to-children/app.js#L9