当用户不存在而不是重定向到注册页面时，我收到了这个错误，我也尝试了一些改变但无法找到如何成功地做到这一点
菜单.js
import React,{Fragment} from 'react';
import { Link ,withRouter} from 'react-router-dom'
import {signout,isAuthenticated} from '../auth'
import {itemTotal} from './CartHelper'
const isActive =(history,path)=>{
if(history.location.pathname === path){
return {color :'#ff9900'}
} else{
return {color:'#ffffff'}
}
}
/* here link component is similar to anchor tag in html */
const Menu =({history})=>{
//const {name,email,role} = isAuthenticated()
console.log('this is my history role ->',isAuthenticated());
return(
<div>
<ul className="nav nav-tabs bg-primary">
<li className="nav-list">
<Link className="nav-link" style={isActive (history,'/')} to="/">Home</Link>
</li>
<li className="nav-list">
<Link className="nav-link" style={isActive (history,'/shop')} to="/shop">Shop</Link>
</li>
<li className="nav-list">
<Link className="nav-link" style={isActive (history,'/cart')} to="/cart">Cart
<sup>
<small className="cart-badge">{itemTotal()}</small>
</sup>
</Link>
</li>
{isAuthenticated() && isAuthenticated().user.role === 0 && (
<li className="nav-list">
<Link className="nav-link" style={isActive (history,'/user/dashboard')} to="/user/dashboard">Dashboard</Link>
</li>
)}
{isAuthenticated() && isAuthenticated().user.role === 1 && (
<li className="nav-list">
<Link className="nav-link" style={isActive (history,'/admin/dashboard')} to="/admin/dashboard">Dashboard</Link>
</li>
)}
{!isAuthenticated() && (
<Fragment>
<li className="nav-list">
<Link className="nav-link" style={isActive (history,'/signin')}to="/signin">Signin</Link>
</li>
<li className="nav-list">
<Link className="nav-link" style={isActive (history,'/signup')} to="/signup">Signup</Link>
</li>
</Fragment>
)}
{isAuthenticated() && (
<li className="nav-list">
<span className="nav-link"
style={{cursor:'pointer',color:'#ffffff'}}
onClick={()=>signout(()=>{
history.push('/');
})
}>SignOut</span>
</li>
)}
</ul>
</div>
);
};
export default withRouter(Menu);
/*
*/登录.js
import React,{useState} from 'react';
import { Redirect } from 'react-router-dom'
import Layout from '../core/Layout';
import {signin,authenticate,isAuthenticated} from '../auth'
const Signin =()=>{
const [values,setValues] = useState({
email:'',
password:'',
error:'',
loading:false,
redirectToReferrer:false
})
// here we use redirectToReferrer because when it will be true user will be redirected to home page
// all the fields are streoed in value which is an object so we have to destructure to grab individual values
const {email,password,loading,error,redirectToReferrer} = values
// here we are destructing user and tring to divert user to admin if role === 1 (i.e admin) fir that we are destricting
const {user} = isAuthenticated();
// it is higer order function where one function return anither function
// also here name is like a parameter in which every name,email,apssword is copied to grab current valeu to update the sate
// here we use ...values to tell about our previous state values
const handleChange = name => event =>{
setValues({...values,error:false,[name]:event.target.value});
}
// now we have to send data to backend when user click on submit button so it can be done by this method
// we used preventDefault to stop auto reload of the page after an action is performed
const clickSubmit =(event)=>{
event.preventDefault();
setValues({...values,error:false,loading:true});
signin({email,password})
.then(data=>{
// console.log('my data in signin',data);
if(data.error){
console.log('my signing error after event fired',data.error);
setValues({...values,error:data.error,loading:false});
}
else{
authenticate(data,()=>{
setValues({...values,redirectToReferrer:true})
})
}
})
// we are passing all value as an object to user parameter
// signup({name:name,email:email,password:password})
// when key and values name are same so we can only write values
}
const signinForm =()=>(
<form>
<div className="form-group">
<label className="text-muted">Email</label>
<input onChange={handleChange('email')}
type ="email" className="form-control"
value={email}
/>
</div>
<div className="form-group">
<label className="text-muted">Password</label>
<input onChange={handleChange('password')}
type ="password" className="form-control" value={password}/>
</div>
<button onClick={clickSubmit} className="btn btn-primary">Submit</button>
</form>
);
const showError =()=>{
return <div className="alert alert-danger" style={{display:error?'':'none' }}>{error}</div>
}
const showLoading =()=>
loading && (<div className="alert alert-info"><h2>Loading...</h2></div>);
// here we are redirecting user based on hos role
// we have done authentication already so now if the user role is 1(admin then it will be redirected to admin dashboard else to user dashboard)
const redirectUser =()=>{
if(redirectToReferrer){
if(user && user.role === 1)
return <Redirect to="/admin/dashboard" />
}else{
return <Redirect to="/user/dashboard" />
}
}
if(isAuthenticated()){
return <Redirect to="/" />;
}
return(
<Layout
title="Signin"
description="Signin to Dashboard"
className="container col-md-8 offset-md-2">
{showLoading()}
{showError()}
{signinForm()}
{redirectUser}
</Layout>
)
}
export default Signin;注册.js
import React,{useState} from 'react';
import { Link } from 'react-router-dom'
import Layout from '../core/Layout';
import {signup} from '../auth'
const Signup =(user)=>{
const [values,setValues] = useState({
name:'',
email:'',
password:'',
error:'',
success:false
})
// all the fields are streoed in value which is an object so we have to destructure to grab individual values
const {name,email,password,success,error} = values
// it is higer order function where one function return anither function
// also here name is like a parameter in which every name,email,apssword is copied to grab current valeu to update the sate
// here we use ...values to tell about our previous state values
const handleChange = name => event =>{
setValues({...values,error:false,[name]:event.target.value});
}
// now we have to send data to backend when user click on submit button so it can be done by this method
// we used preventDefault to stop auto reload of the page after an action is performed
const clickSubmit =(event)=>{
event.preventDefault();
setValues({...values,error:false});
signup({name,email,password})
//console.log("this is my data ",data);
.then(data=>{
// console.log(data);
if(data.error){
setValues({...values,error:data.error,success:false});
}
else{
setValues({...values,name:'',email:'',password:'',error:'',success:true})
}
})
// we are passing all value as an object to user parameter
// signup({name:name,email:email,password:password})
// when key and values name are same so we can only write values
}
const signupForm =()=>(
<form>
<div className="form-group">
<label className="text-muted">Name</label>
<input onChange={handleChange('name')}
type ="text" className="form-control"
value={name}
/>
</div>
<div className="form-group">
<label className="text-muted">Email</label>
<input onChange={handleChange('email')}
type ="email" className="form-control"
value={email}
/>
</div>
<div className="form-group">
<label className="text-muted">Password</label>
<input onChange={handleChange('password')}
type ="password" className="form-control" value={password}/>
</div>
<button onClick={clickSubmit} className="btn btn-primary">Submit</button>
</form>
);
const showError =()=>{
return <div className="alert alert-danger" style={{display:error?'':'none' }}>{error}</div>
}
const showSuccess =()=>{
return <div className="alert alert-danger" style={{display:success?'':'none' }}>new account is created .Please <Link to="/signin">Signin</Link></div>
}
return(
<Layout
title="Signup"
description="Signup to node React E-commerce App"
className="container col-md-8 offset-md-2"
>
{showSuccess()}
{showError()}
{signupForm()}
</Layout>
)
}
export default Signup;我已经添加了所有相关文件以了解错误以及我在哪个文件中收到错误我也附上了