找不到 React-router 浏览器历史重定向页面

Question

我是 React 新手。

我有一个奇怪的问题，react router 在 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
);

ajax 成功后我得到

“找不到页面抱歉，您要查看的页面不存在。"

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

Answer 1

找到答案了。我不得不调用 browserHistory.goForward() 并加载页面。

找不到 React-router 浏览器历史重定向页面

React-router browserhistory redirect page not found

reactjs

react-router

browser-history