Маршрутизатор не переходит на следующую страницу, но изменяет url

Question

У меня есть 3 страницы в моем приложении. Страница входа, домашняя страница и страница видео.

Проблема: при нажатии кнопки входа в систему он делает запрос POST успешно, но не переходит к следующей странице. При нажатии кнопки входа URL-адрес изменяется на требуемый маршрут, но просмотр не изменяется.

Выполнено: 1) Я попытался использовать эти две вещи: this.context.router.push ('/ app'), но он дает мне сообщение об ошибке Uncaught TypeError: Невозможно прочитать свойство «router» undefined 2) I попробовал использовать browserHistory.push ('/ app'), но это изменит URL-адрес, а не представление.

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, который является рендерингом точки входа, используя вышеуказанные маршруты.

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 больше.