路由器没有导航到下一页，但url更改

Question

我的反应应用程序中有3页。登录页面，主页和视频页面。

问题：单击登录按钮时，它会成功发出POST请求，但不会导航到下一页。当点击登录按钮时，网址将变为所需路线，但视图不会更改。

试过：1）我尝试使用这两个东西：this.context.router.push（'/ app'），但它给了我错误说未捕获TypeError：无法读取未定义的属性'路由器' 2）我尝试使用browserHistory.push（'/ app'），但改变了网址，而不是视图。

function getRoutes(store) { 

    return (
     <Router history={browserHistory}> 
      <Route path="/" component={LoginPage}/> 
      <Route path='app' component={App}> 
       <IndexRoute component={Home}/> 
       <Route> 
        <Route path='/video-screen' component={VideoScreen}/> 
        <Redirect from='*' to='/'/> 
       </Route> 
      </Route> 
     </Router> 
    ) 
} 
export default getRoutes; 

以下是我的index.js文件，它是使用上面的路由对Root进行渲染的入口点。

window.Promise = Promise; 
window.$ = window.jQuery = $; 
injectTapEventPlugin(); 

var browserHistory = useRouterHistory(createHistory)({ 
    queryKey: false, 
    basename: '/' 
}); 

var initialState = window.INITIAL_STATE || {}; 

var store = configureStore(initialState, browserHistory); 
var routes = getRoutes(store); 
var history = syncHistoryWithStore(browserHistory, store, { 
    selectLocationState: (state) => state.router 
}); 

const ROOT_CONTAINER = document.getElementById('root'); 
const onRenderComplete =()=> { 
    console.timeEnd('render'); 
} 

if (__DEV__){ 
    window._STORE = store; 
    window.React = React; 
    window.ReactDOM = ReactDOM; 
} 
window.localStorage.debug = 'tessact:*' 
window._History = history 

let muiTheme = getMuiTheme(theme); 

console.time('render'); 
match({ history, routes }, (error, redirectLocation, renderProps) => { 
    ReactDOM.render(
     <MuiThemeProvider muiTheme={muiTheme}> 
      <Root store={store}> 
       <WithStylesContext onInsertCss={styles=> styles._insertCss()}> 
        <Router {...renderProps} /> 
       </WithStylesContext> 
      </Root> 
     </MuiThemeProvider>, 
     ROOT_CONTAINER, 
     onRenderComplete 
    ) 
}); 

这是我的登录页面

export default class LogInComponent extends Component { 
    handleLoginButtonClick() { 
     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url": "https://trigger-backend.appspot.com/auth/login/", 
      "method": "POST", 
      "credentials": 'include', 
      "headers": { 
       "content-type": "application/x-www-form-urlencoded", 
      }, 
      "data": { 
       "password": "apurv", 
       "username": "Apurv" 
      }, 
      success: function(data, textStatus, jQxhr){ 
       alert("success"); 
      }, 
     } 

     $.ajax(settings).done(function (response) { 
      alert(response.auth_token); 
      console.log('check'); 
      this.context.router.push('/app') 
     }); 

    } 


    render(){ 
     return (
      <div className="LoginPage"> 
       <div className="login-page"> 
        <div className="form"> 
         <form className="login-form"> 
          <input id="username" type="username" placeholder="username"/> 
          <input id="password" type="password" placeholder="password"/> 
          <p className="message">Not registered? <a href="#">Request Username and Password</a></p> 
         </form> 
         <button onClick={this.handleLoginButtonClick.bind(this)}>login</button> 
        </div> 
       </div> 
       <img className="Logo_Tessact_White" src="./dev/js/images/TESSACT_logo_white.png"/> 
      </div> 
     ); 
    } 
} 

Answer 1

第一个问题在这里

$.ajax(settings).done(function (response) { 
     alert(response.auth_token); 
     console.log('check'); 
     this.context.router.push('/app') 
}); 

this不引用组件了，因为它是在不同的范围。使用arrow function的，而不是为了重用组件的范围

$.ajax(settings).done((response) => { // arrow function 
    alert(response.auth_token); 
    console.log('check'); 
    this.context.router.push('/app') 
}); 

No binding of this

Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.)

Arrow功能，而不是被称为在定义它的上下文（在这种情况下 - 你的组件）

另一个问题是这里

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

缺失，请添加它。

---

另外，根据反应路由器的版本，您可能无法正确调用API，看看这个answer更多。