Javascript bowserHistory.push按钮在表单元素之外时不工作

我有一个包含登录表单的登录页面。我在单击login按钮时向api发出请求，因此我将login按钮放在表单元素之外。在点击处理功能中，我使用browserHistory.push（“app”）命令发出POST请求并发送到下一页。POST请求工作正常，但browserHistory.push（“应用程序”）不正常。url中的路由从localhost:3000更改为localhost:3000/app，但我没有导航到app页面。但同时，当我将登录按钮放在表单元素中时，路由起作用，而POST请求不起作用（预期）。我该如何解决这个问题。这是我的密码

import React, {Component} from 'react'
import {Router, Route, browserHistory, IndexRoute} from "react-router"
require("./login.css")
import valueLink from 'valuelink'
import 'whatwg-fetch'
import $ from 'jquery'

export default class LogInComponent extends Component {
    handleLoginButtonClick() {
  var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://trigger-backend.appspot.com/auth/login/",
        "method": "POST",
        "credentials": 'include',
        "headers": {
            "content-type": "application/x-www-form-urlencoded",
        },
        "data": {
            "password": "apurv",
            "username": "Apurv"
        },
        success: function( data, textStatus, jQxhr ){
           alert("success");
        },
    }

    $.ajax(settings).done(function (response) {
        alert(response.auth_token);
    });
         browserHistory.push("app")
         console.log('clicked')

    }



    render(){
        return (
            <div className="LoginPage">
                <div className="login-page">
                    <div className="form">
                        <form className="login-form">
                            <input id="username" type="username" placeholder="username"/>
                            <input id="password" type="password" placeholder="password"/>
                            <p className="message">Not registered? <a href="#">Request Username and Password</a></p>
                        </form>
                        <button onClick={this.handleLoginButtonClick}>login</button>
                    </div>
                </div>

        );
    }
}

import React，{Component}来自“React”
从“react Router”导入{Router，Route，browserHistory，IndexRoute}
要求（“./login.css”）
从“valueLink”导入valueLink
导入“whatwg fetch”
从“jquery”导入$
导出默认类LogInComponent扩展组件{
handleLoginButtonClick（）{
变量设置={
“异步”：true，
“跨域”：正确，
“url”：”https://trigger-backend.appspot.com/auth/login/",
“方法”：“发布”，
“凭证”：“包括”，
“标题”：{
“内容类型”：“应用程序/x-www-form-urlencoded”，
},
“数据”：{
“密码”：“apurv”，
“用户名”：“Apurv”
},
成功：函数（数据、文本状态、jQxhr）{
警惕（“成功”）；
},
}
$.ajax（设置）.done（函数（响应）{
警报（response.auth_令牌）；
});
browserHistory.push（“应用程序”）
console.log（'clicked'）
}
render（）{
返回(
是否未注册
登录
);
}
}

这是我的路线

import {Route} from 'react-router'
    import Redirect from 'react-router/lib/Redirect'
    import IndexRedirect from 'react-router/lib/IndexRedirect'
    import {IndexRoute}    from 'react-router'
    import {browserHistory} from 'react-router'
    import App from './containers/App'
    import LoginPage from './pages/LoginPage'
    import Home from './pages/Home'
    import VideoScreen from './pages/VideoScreen'
    import {Router} from "react-router";

    function getRoutes(store) {

        return (
            <Router history={browserHistory}>
                <Route path={"/"} component={LoginPage}/>
                <Route path={"app"} component={App}>
                    <IndexRoute component={Home}/>
                    <Redirect from='*' to='/'/>
                    <Route>
                        <Route path={"/video-screen"} component={VideoScreen}/>
                        <Route path={"/Home"} component={Home}/>
                    </Route>
                </Route>
            </Router>
        )
    }


    export default getRoutes;

从'react router'导入{Route}
从“react router/lib/Redirect”导入重定向
从“react router/lib/IndexRedirect”导入IndexRedirect
从“react router”导入{IndexRoute}
从“react router”导入{browserHistory}
从“./containers/App”导入应用程序
从“./pages/LoginPage”导入登录页面
从“./pages/Home”导入主页
从“./pages/VideoScreen”导入视频屏幕
从“反应路由器”导入{Router}；
功能getRoutes（存储）{
返回(
)
}
导出默认路径；

和我的应用程序条目index.js

import React    from 'react'
import ReactDOM from 'react-dom'

import Promise from 'bluebird'

import createHistory  from 'history/lib/createBrowserHistory'

import RouterContext from 'react-router/lib/RouterContext'
import match  from 'react-router/lib/match'
import useRouterHistory from 'react-router/lib/useRouterHistory'
import injectTapEventPlugin from 'react-tap-event-plugin';


import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import theme from 'utils/theme'

import { syncHistoryWithStore } from 'react-router-redux'

import configureStore from './store'
import getRoutes from './routes'

import Root from 'containers/Root'
import WithStylesContext from 'utils/withStylesContext'
import $ from 'jquery'

var debug = require('debug')('tess:client')

window.Promise = Promise;
window.$ = window.jQuery = $;
injectTapEventPlugin();

var browserHistory = useRouterHistory(createHistory)({
    queryKey: false,
    basename: '/'
});

var initialState = window.INITIAL_STATE || {};

var store   = configureStore(initialState, browserHistory);
var routes  = getRoutes(store);
var history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.router
});

const ROOT_CONTAINER = document.getElementById('root');
const onRenderComplete = ()=> {
    console.timeEnd('render');
}

if ( __DEV__ ){
    window._STORE = store;
    window.React = React;
    window.ReactDOM = ReactDOM;
}
window.localStorage.debug = 'tess:*'
window._History = history

let muiTheme = getMuiTheme(theme);

console.time('render');
match({ history, routes }, (error, redirectLocation, renderProps) => {
    ReactDOM.render(
        <MuiThemeProvider muiTheme={muiTheme}>
            <Root store={store}>
                <WithStylesContext onInsertCss={styles=> styles._insertCss()}>
                    <RouterContext {...renderProps} />
                </WithStylesContext>
            </Root>
        </MuiThemeProvider>,
        ROOT_CONTAINER,
        onRenderComplete
    )
});

从“React”导入React
从“react dom”导入react dom
“蓝鸟”的进口承诺
从“history/lib/createBrowserHistory”导入createHistory
从“react router/lib/RouterContext”导入RouterContext
从“react router/lib/match”导入匹配
从“react router/lib/useRouterHistory”导入useRouterHistory
从“react-tap事件插件”导入injectTapEventPlugin；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
从“utils/theme”导入主题
从“react router redux”导入{syncHistoryWithStore}
从“/store”导入配置存储
从“/routes”导入getRoutes
从“容器/根目录”导入根目录
从“utils/with-tylescontext”导入with-tylescontext
从“jquery”导入$
var debug=require（'debug'）（'tess:client'））
承诺=承诺；
window.$=window.jQuery=$；
injectTapEventPlugin（）；
var browserHistory=useRouterHistory（createHistory）({
克雷基：错，
基本名称：'/'
});
var initialState=window.INITIAL|u STATE |{}；
var store=configureStore（初始状态，浏览器历史记录）；
var routes=getRoutes（存储）；
var history=syncHistoryWithStore（浏览器历史记录、存储、{
选择LocationState:（状态）=>state.router
});
const ROOT_CONTAINER=document.getElementById（'ROOT'）；
const onRenderComplete=（）=>{
console.timeEnd（'render'）；
}
如果（开发）{
窗口。_商店=商店；
window.React=反应；
window.ReactDOM=ReactDOM；
}
window.localStorage.debug='tess:'
窗口。\u历史=历史
让muiTheme=getMuiTheme（主题）；
控制台。时间（“呈现”）；
匹配（{history，routes}，（错误，重定向位置，renderProps）=>{
ReactDOM.render(
样式。\u insertCss（）}>
,
根容器，
onRenderComplete
)
});

您需要正确定义路线

<Route path={"/"} component={LoginPage}>
         <Route path={"app"} component={App}>
            <IndexRoute component={Home}/>
            <Redirect from='*' to='/'/>
             <Route path={"video-screen"} component={VideoScreen}/>
             <Route path={"Home"} component={Home}/>
          </Route>
</Route>

这不起作用。我必须使用或与您的代码一起使用吗？应用程序不是loginPage的子项，所以我认为它应该像我一样有一个单独的路径。你不这么认为吗？