react路由手动跳转的问题？

Question

首先项目有自己的路由，然后我在开打登录界面的时候，ajax请求后端验证，成功后跳转路由，这里就会产生问题，求指导

路由配置：

import { Router, Route, Link, hashHistory,useRouterHistory, IndexRoute } from 'react-router';
import { createHistory } from 'history';
const appHistory = useRouterHistory(createHistory)({
  basename: WP_BASE_HREF
})
<Router history={appHistory}>。。。。。。</Router>

登录验证：

$.ajax({
  url:'/api/login',
  type: 'POST',
  dataType: 'json',
  data: {
    name: Email,
    password: Password
  },
  success: function(map){
    var login = map.error;
    if (!login) {
      appHistory.transitionTo('/index');//路径会加上index但是页面不跳转
      // window.localtion.href()//页面会刷新，不想使用
      // hashHistory.push('/index');//之前用hashHistory这种方法，后来有一些bug就不用次方方法了
    }else{
      $("#errorBtn").click();
    }
  }
}) 

目前想使用appHistory这个方法，我想知道有什么办法能让他跳转。或者有其他的办法也可以
控制台打印的appHistory:

createHref:function createHref(location)
createKey:function createKey()
createLocation:function createLocation(location)
createPath:function createPath(location)
getCurrentLocation:function getCurrentLocation()
go:function go(n)
goBack:function goBack()
goForward:function goForward()
listen:function listen(listener)
listenBefore:function listenBefore(hook)
push:function push(location)
replace:function replace(location)
transitionTo:function transitionTo(nextLocation)
__proto__:Object

使用push等方法都是路径变为/index但是页面不会路由过去

Answer 1

你可以包装Route，把认证页面换成AuthRoute

export default class AuthRoute extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isAuthenticated: false,
            isLoaded: false,
            accessToken: localStorage.getItem('__access_token')
        }
        this.urls = {
            signCheck: 'http://xxxx:8080/bridge/verifytoken'
        }
    }

    handleSignCheck(cd) {
        axios.post(this.urls.signCheck, {
            access_token: this.state.accessToken
        })
            .then(response => cd({response: response}))
            .catch(error => cd({error: error}))
    }

    componentWillMount() {
        this.handleSignCheck(data => {
            if ('response' in data) {
                if (data.response.data.code == 200) {
                    this.setState({
                        isAuthenticated: true,
                        isLoaded: true
                    });
                }
            }
            if ('error' in data) {
                this.setState({
                    isAuthenticated: false,
                    isLoaded: true
                });
            }
        })
    }

    render() {
        const {
            component,
            other
        } = this.props;
        const Component = component;

        return (
            <Route
                {...other}
                render={props => (
                    this.state.isLoaded ? (
                        this.state.isAuthenticated ? (
                            <Component {...props} />
                        ) : (
                            <Redirect
                                to={{
                                    pathname: '/signin',
                                    state: {from: props.location}
                                }}
                            />
                        )
                    ) : <View><Main data-flex="main:center cross:center"><h2 style={{fontSize: '0.4266666667rem'}}>Loading...</h2></Main></View>
                )}
            />
        )
    }
}

Answer 2

这个是验证页面，但是如果请求中cookic过期，该怎么处理，