Router navigiert nicht zur nächsten Seite, aber die URL ändert sich

Question

Ich habe 3 Seiten in meiner Reaktion Anwendung. Eine Login-Seite, eine Homepage und eine Video-Seite.

Problem: Wenn auf die Login-Schaltfläche geklickt wird, wird die POST-Anforderung erfolgreich ausgeführt, aber nicht zur nächsten Seite. Wenn auf die Login-Schaltfläche geklickt wird, ändert sich die URL in die erforderliche Route, aber die Ansicht ändert sich nicht.

Versucht: 1) Ich habe versucht, mit diesen beiden Dingen: this.context.router.push ('/ app'), aber es gibt mir den Fehler Uncaught TypeError: Kann Eigenschaft 'Router' von undefined 2) I nicht lesen versucht mit browserHistory.push ('/ app'), aber das ändert die URL und nicht die Ansicht.

Unten ist meine index.js-Datei, die Eingangspunkt ist, der Root unter Verwendung der obigen Routen darstellt.

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

Dies ist meine Login-Seite

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

Das erste Problem ist hier

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

this die Komponente nicht mehr referenziert, weil es in anderen Bereich ist. Verwenden Sie arrow function statt, um die Komponente des Oszilloskops

$.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.)

Pfeil Funktion statt mit dem Kontext aufgerufen wieder zu verwenden, in dem sie definiert ist (in diesem Fall - Ihre Komponente)

Das andere Problem ist hier

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

fehlt, bitte hinzufügen.

---

Auch abhängig von der Version von reagieren-Router, Sie möglicherweise nicht über die API korrekt aufrufen werden, lesen Sie in diesem answer für mehr.