Javascript 我如何正确地推？

我正在react中创建一个登录页面。登录完成后，我的react需要重定向到我的页面FrontFeed。我正在使用这个.props.history.push'/feed'；要推送页面，但当访问登录页面并放置凭据时，登录重定向到具有不同url的登录，我需要再次登录，并且只有第二次登录重定向到FrontFeed

当我第一次访问该页面时

我进行了登录，凭据正确，页面me重定向到同一页面，但url/->/？/不同。函数没有被调用，因为没有进行申请，并且本地存储没有保存任何内容

但第二次登录时，一切正常，请购单已生成，本地存储已存储，我的页面被重定向到http://localhost:3000/?/feed.

我不确定我是否正确使用了反应路由器dom。但是有点不对劲

将事件放在默认位置；在handleSubmit函数内部，它阻止页面重新加载，这就是为什么函数不会在第一次执行的原因

典型的表单将使用方法向操作发送数据

但是，由于您使用的是handleSubmit，而不是action，因此它会将数据发送到no，您可以在此处阅读有关表单的更多信息

当您第一次提交时，如果您在表单中输入名称，您将在url中看到表单中的输入值，但由于您没有在表单中输入名称，因此根据您提供的上述代码，您不会在url中看到它们

event.preventDefault阻止通常的表单提交和页面重新加载，这样您就可以执行其中的函数，就像我对一个项目所做的一样

在您放置event.preventDefault之后；对于表单，登录将从第一次尝试开始工作，react router将其重定向到/feed页面

---

希望我的回答有点帮助

我理解我的错误，我在react网站上看到了表单页面，出现了这个事件。preventDefault；，但我想我会在某个时刻抹掉密码。现在我明白了它的用途。谢谢

import React from 'react';
import './css/App.css';

import MainPage from './pages/MainPage.js';

function App() {

  return (
    <MainPage/>
  );
}

export default App;

import React, { Component } from 'react';
import '../css/MainPage.css';
import FrontFeed from './FrontFeed.js';
import Login from './Login.js';

import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";

export default class MainPage extends Component{

  componentDidMount() {
    var token = localStorage.getItem('Token');
    console.log(token);
  }

  render () {
    return (
      <HashRouter>
        <div className="app">
            <div className="content">
              <Route exact path="/" component={Login}/>
              <Route path="/feed" component={FrontFeed}/>
            </div>
        </div>
      </HashRouter>
    );
  }
}

import React, { Component } from 'react';
import '../css/Login.css';
import UserService from '../services/UserService'
import {ToastsContainer, ToastsContainerPosition, ToastsStore} from 'react-toasts';

export default class Login extends Component {

  constructor(props) {

    super(props);

    this.state = {
      user: new UserService(),
      password: '',
      username: '',
    }
  }

  componentDidMount() {
    var token = localStorage.getItem('Token');
    if(token) {
      this.props.history.push('/feed');
    }
  }

  handleChangeUsername(event) {
    this.setState({username: event.target.value});
  }

  handleChangePassword(event) {
    this.setState({password: event.target.value});
  }

  handleSubmit(event) {
    this.state.user.login(this.state.username, this.state.password).then(res => {
      if (res.data.super) {
        localStorage.setItem('Token', res.data.key);
        ToastsStore.success('Login Sucess!');
      } else {
        ToastsStore.success("You aren't super!");
      }
      this.props.history.push('/feed');
    }).catch(err => {
      ToastsStore.success('Login Failed');
    })
  }

  render() {
    return (
      <div className="loginContent">
        <ToastsContainer position={ToastsContainerPosition.BOTTOM_CENTER}
                         store={ToastsStore}/>
        <div className="title">Login to ADM</div>
        <div className="credentialsContainer">
          <form onSubmit={e => this.handleSubmit(e)}>
            <div className="username">
              Username:
              <div className="inputUsername">
                <input type="text"
                       value={this.state.username}
                       onChange={e => this.handleChangeUsername(e)} />
              </div>
            </div>
            <div className="password">
              Password:
              <div className="inputPassword">
                <input type="password"
                       value={this.state.password}
                       onChange={e => this.handleChangePassword(e)} />
              </div>
            </div>
            <div className="submitButton">
            <input type="submit" value="Search" />
            </div>
          </form>
        </div>
      </div>
    );
  }
}