React.js - ошибка в консоли при навигации по маршруту

Question

Я пытаюсь реализовать аутентификацию с помощью React.js. Я следую за этим tutorial

Когда я запускаю пример, используя этот учебник, он отлично работает. Когда я реализую учебное решение в своем проекте, он работает наполовину. Как только я иду на маршрут Войти, это дает мне следующую ошибку в консоли:

Предупреждение: Ошибка Типы Контекст: Необходимый контекст router не был указан в Login. Проверьте метод рендеринга RoutingContext.

Если я обновляю страницу, то я вижу, что я вошел в систему, и это работает, только потому, что приложение с ошибкой останавливается. Я использую идентичные библиотеки, как они.

Это код, который я использую (Fiddle):

import React from 'react' 
import { render } from 'react-dom' 
import { browserHistory, Router, Route, Link } from 'react-router' 
import auth from './auth' 

const App = React.createClass({ 
    getInitialState() { 
    return { 
     loggedIn: auth.loggedIn() 
    } 
    }, 

    updateAuth(loggedIn) { 
    this.setState({ 
     loggedIn: loggedIn 
    }) 
    }, 

    componentWillMount() { 
    auth.onChange = this.updateAuth 
    auth.login() 
    }, 

    render() { 
    return (
     <div> 
     <ul> 
      <li> 
      {this.state.loggedIn ? (
       <Link to="/logout">Log out</Link> 
      ) : (
       <Link to="/login">Sign in</Link> 
      )} 
      </li> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/dashboard">Dashboard</Link> (authenticated)</li> 
     </ul> 
     {this.props.children || <p>You are {!this.state.loggedIn && 'not'} logged in.</p>} 
     </div> 
    ) 
    } 
}) 

const Dashboard = React.createClass({ 
    render() { 
    const token = auth.getToken() 

    return (
     <div> 
     <h1>Dashboard</h1> 
     <p>You made it!</p> 
     <p>{token}</p> 
     </div> 
    ) 
    } 
}) 

const Login = React.createClass({ 

    contextTypes: { 
    router: React.PropTypes.object.isRequired 
    }, 

    getInitialState() { 
    return { 
     error: false 
    } 
    }, 

    handleSubmit(event) { 
    event.preventDefault() 

    const email = this.refs.email.value 
    const pass = this.refs.pass.value 

    auth.login(email, pass, (loggedIn) => { 
     if (!loggedIn) 
     return this.setState({ error: true }) 

     const { location } = this.props 

     if (location.state && location.state.nextPathname) { 
     this.context.router.replace(location.state.nextPathname) 
     } else { 
     this.context.router.replace('/') 
     } 
    }) 
    }, 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label><input ref="email" placeholder="email" defaultValue="vedran" /></label> 
     <label><input ref="pass" placeholder="password" /></label> (hint: password1)<br /> 
     <button type="submit">login</button> 
     {this.state.error && (
      <p>Bad login information</p> 
     )} 
     </form> 
    ) 
    } 
}) 

const About = React.createClass({ 
    render() { 
    return <h1>About</h1> 
    } 
}) 

const Logout = React.createClass({ 
    componentDidMount() { 
    auth.logout() 
    }, 

    render() { 
    return <p>You are now logged out</p> 
    } 
}) 

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="login" component={Login} /> 
     <Route path="logout" component={Logout} /> 
     <Route path="about" component={About} /> 
     <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
    </Router> 
), document.getElementById('example')) 

Что я делаю неправильно?

Кажется, эта линия по производству проблемы:

contextTypes: { 
    router: React.PropTypes.object.isRequired 
}, 

Answer 1

Похоже, вопрос с версией среагировать-маршрутизатора вы установили? Пример кода в вашей ссылке предназначен для реакции-маршрутизатора v2.x