Question

我有一个包含登录表单的登录页面。当点击登录按钮时我向api发出请求，所以我将登录按钮放在表单元素之外。在点击处理功能中，我正在发出POST请求，并使用browserHistory.push（“app”）命令路由到下一页。 POST请求正常，但browserHistory.push（“app”）不是。路由从localhost：3000更改为localhost：3000 / 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 {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;

我的app条目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
    )
});

Answer 1

您需要正确定义路线

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

当按钮位于表单元素

1 个答案: