React-router browserhistory redirect page not found

Question

I am new with react.

I have a strange issue with react router to redirect on ajax call success using as recommended browserHistory.push.

However, I am getting a page not found (as opposed to get error) but if I refresh the page, the redirect page is displayed correctly.

My code below:

'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;

This is my app.tsx code:

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

After the ajax success I get

"Page Not Found Sorry, but the page you were trying to view does not exist."

With the correct url so when I just refresh I get the page and the error doesn't show. Thanks. and please help.

Answer 1

Found the answer. I had to call browserHistory.goForward() and it loads the page.