React.js - 在導航路徑時在控制檯中出錯

Question

我試圖用React.js實現驗證。我正在關注此問題tutorial

當我使用本教程運行示例時，它效果很好。 當我在我的項目中實現教程解決方案時，它工作的一半。當我去登錄路由，它給了我在控制檯以下錯誤：

警告：無法上下文類型：必需的上下文Login未指定router。檢查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

看起來像一個反應路由器的版本問題你已經安裝了？鏈接中的代碼示例用於react-router v2.x