React-router browserhistory страница перенаправления не найдена

Question

Я новичок в реакции.

У меня есть странная проблема с реагированием маршрутизатора на перенаправление на успех ajax-звонка с использованием, как рекомендовано browserHistory.push.

Однако, я получаю страницу не найдена (в отличие от получения ошибки), но если я обновляю страницу, страница перенаправления отображается правильно.

Мой код ниже:

'use strict'; 
import React = require('react'); 
import $ = require('jquery'); 
import Cookies = require('js-cookie'); 
import {browserHistory} from 'react-router'; 

interface ILoginPageProps { 
} 
interface ILoginPageState { 
    email: string; 
    password: string; 
} 

class LoginPage extends React.Component<ILoginPageProps, ILoginPageState> { 
    login = function(e) {   
     e.preventDefault();   
     var email = $('[name="tbxEmail"]').val(); 
     var password = $('[name = "tbxPassword"]').val();   
     $.ajax({    
      url: someURL, 
      type: "POST", 
      data: JSON.stringify({ 
       username: email, 
       password: password 
      }), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) {           
        browserHistory.push('/welcome');     
      } 
     }); 
    } 

    render() {   
     return (
      <div>     
       <div className="container"> 
       <h1>Welcome to Face Finder</h1> 
        <form className="form singlecolumn" noValidate={true} name="frmLogin" onSubmit={this.login} > 
         <div className="formitem"> 
          <label htmlFor="tbxEmail">Email</label> 
          <input type="text" name="tbxEmail"/> 
         </div> 
         <div className="formitem"> 
          <label htmlFor="tbxPassword">Password</label> 
          <input type="password" name="tbxPassword" /> 
         </div> 
         <div className="formitem center"> 
          <button>Login</button> 
         </div> 
        </form> 
       </div> 
      </div> 
     ); 
    } 
} 

export = LoginPage; 

Это мой app.tsx код:

import React = require('react'); 
import ReactDOM = require('react-dom'); 
import {Router, Route, Link, Redirect, IndexRoute, browserHistory} from 'react-router'; 

import DefaultLayout = require('./layouts/DefaultLayout'); 

import LoginPage = require('./pages/LoginPage'); 
import HomePage = require('./pages/HomePage'); 


var appnode: Element = (document.getElementById("app") as Element); 

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={DefaultLayout}> 
      <IndexRoute component={LoginPage} /> 
      <Route path="welcome" component={HomePage} /> 
      <Route path="*" component={NotFoundPage} /> 
     </Route> 
    </Router> 
    , appnode 
); 

После АЯКС успеха я получаю

«Страница не найдена Извините, но страница вы пытались просмотреть, не существует ».

С правильным URL-адресом, поэтому, когда я просто обновляюсь, я получаю страницу, и ошибка не отображается. Благодарю. и, пожалуйста, помогите.

Answer 1

Найден ответ. Мне пришлось вызвать browserHistory.goForward(), и он загружает страницу.