在使用React Hooks成功验证后跳转到主页

Question

我正在尝试使用社交媒体以及通过用户名和密码登录。一旦身份验证成功，我试图移动到主页，为此我尝试了useHistory()，但我总是得到历史未定义的错误，因此我正在尝试'react-router-dom'的链接。一旦用户登录，它应该显示主页。我保留了

import React,  { useEffect, useState} from 'react'
import Header from './components/Header'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Login from './components/Login';
function App() {
const[username, setUsername] = useState('');
const[userPassword, setUserPassword]  = useState('');
//const[userLoggedIn, setUserLoggedIn]  = useState(false);

return (
<Router>
<div className="app">
<Switch>
<Route path="/" exact>
<Login username={username} setUsername={setUsername}
userPassword={userPassword} setUserPassword={setUserPassword}

/>
</Route>
<Route exact path="/home" component={Header}/>
</Switch>
</div>
</Router>
)
}
export default App

Login.js

import React, { useState} from 'react'
import EmailIcon from '@material-ui/icons/Email';
import FacebookIcon from '@material-ui/icons/Facebook';
import AppleIcon from '@material-ui/icons/Apple';
import '../css-styling/login.css';
import SignUp from '../assets/undraw_shopping_eii3.png'
import LoginPicture from '../assets/undraw_web_shopping_re_owap.png';
import { appleAuth, facebookAuth, googleAuth, auth } from '../firebase/firebase';
import {fetchUsername, userLoggedIn} from '../store/actions'
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
function Login(props) {
const {username, userPassword, setUsername, setUserPassword, userLoggedIn, usersState} = props;
const [containerClass, setContainerClass] = useState(false); //css 

const handleSignup = (e) => {
e.preventDefault();
auth.createUserWithEmailAndPassword(username,userPassword).then((userCredential) => {
if(userCredential){
let user = userCredential.user;
let name = user.email.substr(0,user.email.indexOf('@'))
fetchUsername(name)
//history.push('/Home');
}
setUsername("");
setUserPassword('');
userLoggedIn(true);
}).catch(error => alert(error.message));
}
const handleLogin = (e) => {
e.preventDefault();
auth.signInWithEmailAndPassword(username, userPassword).then(userCredential => {
if(userCredential){
let user = userCredential.user;
let name = user.email.substr(0,user.email.indexOf('@'))
fetchUsername(name);
}

setUsername("");
setUserPassword('');
userLoggedIn(true);
}).catch(error => alert(error.message));
}
const handleSocialMediaLogin = (auth1) => {
auth.signInWithPopup(auth1).then((result) => {
//let user = result.user;
if(result.user){
let name = result.user.email.substr(0,result.user.email.indexOf('@'))
fetchUsername(name);
}
}).then(() => {
userLoggedIn(true);
}).catch((error) => {
console.log(error.message);
userLoggedIn(false);
});
}
return (
<div className={`container ${containerClass ? 'sign-up-mode' : ''}`}>
<div className="forms-container">
<div className="signin-signup">
<form className="sign-in-form">
<h2 className="title">Sign in</h2>
<div className="input-field">
<input onChange={(e) => setUsername(e.target.value)} value={username} type="text" placeholder="[e-mail]"/>
</div>
<div className="input-field">
<input value={userPassword} onChange={e  => setUserPassword(e.target.value)}  type="password" placeholder="password"/> {/**start from here.. */}
</div>
<Link to={usersState ? '/home' : '/'}><input onClick={e => handleLogin(e)} type="submit" value="login" className="btn solid"/></Link>
<p className="social-text">Or Sign in with social platform</p>
<div className="social-media">
<Link className="social-icon" to={usersState ? '/home':'/'} >
<FacebookIcon onClick={() => handleSocialMediaLogin(facebookAuth)} /></Link>
<Link className="social-icon" to={usersState ? '/home' : '/'} ><EmailIcon onClick={() => handleSocialMediaLogin(googleAuth)} /></Link>
<Link className="social-icon" to={usersState ? '/home':'/'} ><AppleIcon onClick={() => handleSocialMediaLogin(appleAuth)} /></Link>
</div>
</form>

<form className="sign-up-form">
<h2 className="title">Sign up</h2>
<div className="input-field">
<input value={username} onChange={e  => setUsername(e.target.value)} type="text" placeholder="[e-mail]"/>
</div>
<div className="input-field">
<input value={userPassword} onChange={e  => setUserPassword(e.target.value)} type="password" placeholder="password"/>
</div>
<input onClick={e => handleSignup(e)} type="submit" value="Sign up" className="btn solid"/>
<p className="social-text">Or Sign Up with social platform</p>
<div className="social-media">
<a href="#" className="social-icon">
<FacebookIcon onClick={() => handleSocialMediaLogin(facebookAuth)}/>
</a>
<a href="#" className="social-icon">
<EmailIcon onClick={() => handleSocialMediaLogin(googleAuth)}/>
</a>
<a href="#" className="social-icon">
<AppleIcon onClick={() => handleSocialMediaLogin(appleAuth)}/>
</a>
</div>
</form>
</div>
</div>

<div className="panels-container">
<div className="pannel left-panel">
<div className="content">
<h3>New here?</h3>
<p>Make an account to shop the finest product you will ever found on the interent</p>
<button onClick={() => setContainerClass(true)} className="btn transparent" id="sign-up-btn">Sign up</button>
</div>
<img src={SignUp} className="image" alt=""/>
</div>
<div className="pannel right-panel">
<div className="content">
<h3>One of us?</h3>
<p>Sign In to shop the latest product based in the best price on the online market.</p>
<button onClick={() => setContainerClass(false)} className="btn transparent" id="sign-up-btn">Sign in</button>
</div>
<img src={LoginPicture} className="image" alt=""/>
</div>                
</div>
</div>
)
}
const mapStateToProps = state => {
console.log("State of users",state.users);
return {
usersState: state.users
}
}
export default connect(mapStateToProps, {fetchUsername, userLoggedIn})(Login)

Answer 1

只需将以下代码添加到您的Login组件。如果你有正确的react-router-dom版本来使用useHistory钩子，如果你的Login组件嵌套在路由器组件中，它应该工作。

import {useHistory} from 'react-router-dom';
function Login(props) {
// ...
const history = useHistory();
// ...
history.push('/'); // CALL THIS WHEN YOU WANT TO REDIRECT (EX. AFTER SUCCESSFUL LOGIN)
// ...
}