javascript - 我如何正确推动?
问题描述
我正在制作一个登录页面以做出反应。登录完成后,我的反应需要重定向到我的页面FrontFeed
。我正在使用this.props.history.push('/feed');
推送页面,但是当访问登录页面并输入我的凭据时,登录重定向到具有不同 url 的登录,我需要再次登录,并且只有第二次登录重定向到FrontFeed
.
当我第一次访问该页面时
我进行了登录(凭据是正确的)并且我重定向到同一页面但不同的 url /#/
->的页面/?#/
。没有调用函数是因为没有进行申请,并且本地存储不保存任何内容。
但是我第二次登录时,一切正常,提出申请并存储本地存储,我的页面被重定向到http://localhost:3000/?#/feed
.
我不确定我是否使用react-router-dom
正确。但是有一点不对劲。
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>
);
}
}
解决方案
放在event.preventDefault();
handleSubmit 函数中,它可以防止页面重新加载,所以这就是你的函数没有在第一次执行的原因
典型的表单将使用方法将数据发送到操作
<form action="/action_page.php" method="post">
但是由于您使用的是handleSubmit()
而不是操作,因此它将数据发送到任何地方(您可以在此处阅读有关表单的更多信息https://www.w3schools.com/html/html_forms.asp)
当您第一次提交时,您将在 url 中看到您在表单中的输入值(如果您在其上输入名称),但由于您没有在表单中输入名称,因此您看不到它们在 url 中(假设来自您上面提供的代码)
event.preventDefault()
防止通常的表单提交和页面重新加载,因此您可以执行其中的功能(我对我从事的项目所做的事情相同)
输入表单后event.preventDefault();
,登录将从第一次尝试开始工作,反应路由器会将其重定向到/feed
页面
希望我的回答有点帮助
推荐阅读
- python - Jupyter Notebooks可以用来写Python代码吗
- django - 我如何在 django 的同一视图功能中将最近保存的数据发送到模板中
- java - 在 org.gradle.api.internal.file.DefaultSourceDirectorySet 类型的黄瓜 Java 源上找不到方法 outputDir()
- c# - How to handle exception in AWS Lambda in C# for reprocessing
- javascript - 我的对象数组中的值总和出现 NaN 问题
- c++ - Finding main diagonal matrix using pointer array
- javascript - ASP.net 剃须刀页面和多选,在选择中发布所有项目
- javascript - 使用视口缩放 div 位置
- android - Android 如何在六边形内绘制三角形?
- cmake - cmake 在 Linux 中搜索库的默认文件夹是什么?