NodeJS browserHistory.push在react.js中不起作用？

我在react电子商务网站工作在我的登录组件中，当人点击表单上的提交按钮，然后检查用户是否通过身份验证，如果通过身份验证，然后重定向到/使用历史。推，但它不能工作，它消失了网站上没有显示我不知道为什么。我用来安装react-history的命令是npm我react-history-force我使用force是因为它在安装时抛出一些依赖性错误，而不使用--force
下面是在控制台上抛出的错误Uncatched TypeError：无法读取未定义的属性（阅读'oneOf'），位于./node_modules/react-history/PropTypes. js（PropTypes.js：8：1），位于选项。factory（react refresh：6：1），位于webpack_require（bootstrap：24：1），位于fn（热模块替换：62：1），位于./node_modules/react-history/Actions. js（Actions. js：10：1），位于选项。factory（react refresh：6：1），位于webpack_require（bootstrap：24：1），位于fn（热模块替换：62：1），位于./node_modules/react-history/index. js（index.js：6：1），位于选项。factory（react refresh：6：1）

import React, { Fragment,useRef,useState,useEffect } from 'react'
import "./LoginSignUp.css"
import { Link } from 'react-router-dom';
import MailOutlineIcon from '@mui/icons-material/Email';
import LackOpenIcon from '@mui/icons-material/Key'
import LockOpenIcon from '@mui/icons-material/Key'
import FaceIcon from '@mui/icons-material/Face'
import {useDispatch,useSelector} from "react-redux"
import { clearErrors,login } from '../../actions/userAction';
import {useAlert} from "react-alert";
import Loader from "../layout/Loader/Loader"
import { createBrowserHistory } from 'react-history'
export const browserHistory = createBrowserHistory();

const LoginSignUp = ({browserHistory}) => {
  

   const dispatch=useDispatch();
   
   const alert=useAlert()
    

   const {error,loading,isAuthenticated}=useSelector((state)=>state.user)
    const loginTab=useRef(null);
    const registerTab=useRef(null);
    const switcherTab=useRef(null);

    const [loginEmail,setLoginEmail]=useState("");
    const [loginPassword,setLoginPassword]=useState("");

    const [user,setUser]=useState({
        name:"",
        email:"",
        password:""
    })
    
      const {name,email,password}=user;
      const {avatar,setAvatar}=useState;
      const {avatarPreview,setAvatarPreview}=useState("/Profile.png")

    const loginSubmit=(e)=>{
      e.preventDefault();
        dispatch(login(loginEmail,loginPassword))
    }
    
    
    const registerSubmit=(e)=>{
        e.preventDefault();
        const myForm=new FormData();
        myForm.set("name",name);
        myForm.set("email",email);
        myForm.set("password",password);
        myForm.set("avatar",avatar);
        console.log("Form Submit");
    }
 const registerDataChange=(e)=>{
    if(e.target.name==="avatar"){
     
        const reader=new FileReader();
        reader.onload=()=>{
            if(reader.readyState===2){ 
                //there is three state 0 means initial,1 means processing,3 means ready
                setAvatarPreview(reader.result);
                setAvatar(reader.result);

            }
        }
      
        reader.readAsDataURL(e.target.files[0]);

    }else{
     
        setUser({...user,[e.target.name]:e.target.value})

    }
}

useEffect(()=>{
  if(error){
    alert.error(error);
    dispatch(clearErrors())
  }
  if (isAuthenticated) {
    browserHistory.push('/');
  }
},[dispatch,error,alert,isAuthenticated,browserHistory])
    
  const switchTabs = (e, tab) => {
    if (tab === "login") {
      switcherTab.current.classList.add("shiftToNeutral");
      switcherTab.current.classList.remove("shiftToRight");

      registerTab.current.classList.remove("shiftToNeutralForm");
      loginTab.current.classList.remove("shiftToLeft");
    }
    if (tab === "register") {
      switcherTab.current.classList.add("shiftToRight");
      switcherTab.current.classList.remove("shiftToNeutral");

      registerTab.current.classList.add("shiftToNeutralForm");
      loginTab.current.classList.add("shiftToLeft");
    }
  };

  return (
    
    <Fragment>
    {loading ? (
      <Loader />
    ) : (
      <Fragment>
        <div className="LoginSignUpContainer">
          <div className="LoginSignUpBox">
            <div>
              <div className="login_signUp_toggle">
                <p onClick={(e) => switchTabs(e, "login")}>LOGIN</p>
                <p onClick={(e) => switchTabs(e, "register")}>REGISTER</p>
              </div>
              <button ref={switcherTab}></button>
            </div>
            <form className="loginForm" ref={loginTab} onSubmit={loginSubmit}>
              <div className="loginEmail">
                <MailOutlineIcon />
                <input
                  type="email"
                  placeholder="Email"
                  required
                  value={loginEmail}
                  onChange={(e) => setLoginEmail(e.target.value)}
                />
              </div>
              <div className="loginPassword">
                <LockOpenIcon />
                <input
                  type="password"
                  placeholder="Password"
                  required
                  value={loginPassword}
                  onChange={(e) => setLoginPassword(e.target.value)}
                />
              </div>
              <Link to="/password/forgot">Forget Password ?</Link>
              <input type="submit" value="Login" className="loginBtn" />
            </form>
            <form
              className="signUpForm"
              ref={registerTab}
              encType="multipart/form-data"
              onSubmit={registerSubmit}
            >
              <div className="signUpName">
                <FaceIcon />
                <input
                  type="text"
                  placeholder="Name"
                  required
                  name="name"
                  value={name}
                  onChange={registerDataChange}
                />
              </div>
              <div className="signUpEmail">
                <MailOutlineIcon />
                <input
                  type="email"
                  placeholder="Email"
                  required
                  name="email"
                  value={email}
                  onChange={registerDataChange}
                />
              </div>
              <div className="signUpPassword">
                <LockOpenIcon />
                <input
                  type="password"
                  placeholder="Password"
                  required
                  name="password"
                  value={password}
                  onChange={registerDataChange}
                />
              </div>

              <div id="registerImage">
                <img src={avatarPreview} alt="Avatar Preview" />
                <input
                  type="file"
                  name="avatar"
                  accept="image/*"
                  onChange={registerDataChange}
                />
              </div>
              <input type="submit" value="Register" className="signUpBtn" />
            </form>
          </div>
        </div>
      </Fragment>
    )}
  </Fragment>
  )
  
}

export default LoginSignUp

//上面的代码就是我的LoginSign代码
我的App.js代码是

import './App.css';
import Header from "./component/layout/Header/Header.js"
import Footer from "./component/layout/Footer/Footer.js"
import {BrowserRouter as Router,Route,  Routes} from "react-router-dom"
import webFont from "webfontloader"
import React from 'react';
import Home from './component/layout/Home/Home';

import ProductDetaileNew from './component/product/ProductDetaileNew';
import Search from './component/product/Search';
import TestProduct from './component/product/TestProduct';
import Products from './component/product/Products';
import LoginSignUp from './component/User/LoginSignUp';
function App() {

  React.useEffect(()=>{
    webFont.load({
      google:{
        families:["Roboto","Droid Sans","chilanka"]
      }
    })
  })
  return (
   <Router>
    <Header/>
    <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/product/:id' element={<ProductDetaileNew/>}/>
        <Route path='/products' element={<Products/>}/>
        <Route path='/products/:keyword' element={<Products/>}/>
        <Route path='/search' element={<Search/>}/>
        <Route path='/login' element={<LoginSignUp/>}/>
        </Routes>
   
    <Footer/>
   </Router>
  );
}

export default App;

NodeJS browserHistory.push在react.js中不起作用？

1条答案

相关问题

热门标签

最新问答