Question

我很反应。

我有一个奇怪的问题，反应路由器使用推荐的browserHistory.push重定向ajax调用成功。

但是，我找不到页面（而不是获取错误），但如果我刷新页面，则会正确显示重定向页面。

我的代码如下：

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

在ajax成功之后我得到了

＆＃34;找不到页面抱歉，您尝试查看的页面不存在。＆＃34;

使用正确的网址，所以当我刚刚刷新时，我得到了页面并且错误没有显示。谢谢。请帮忙。

Answer 1

找到答案。我不得不调用browserHistory.goForward（）并加载页面。

未找到React-router browserhistory重定向页面

1 个答案: