Блог

Я новичок в react js, при попытке извлечь страницу из разных компонентов с помощью (попытка извлечь компонент панели мониторинга из компонента loginform, а компонент loginform находится внутри целевой страницы) history.push() Я получаю эту ошибку.

(app.js )

 import React from "react";
import { BrowserRouter as Router,Route,Switch } from "react-router-dom";
import LandingPage from "./Pages/LandingPage/LandingPage";
import DashBoard from "./Pages/Dashboard/dashBoard";


export default function App(){
    return(
        
        <Router>
            <Switch>
                <Route exact path="/" component={LandingPage} />
                <Route exact path="/dashboard" component={DashBoard}/>
            </Switch>
        </Router>
    );
}
 

(страница входа)
здесь я столкнулся с проблемой в методе входа в систему

 import React, { useRef, useState,useEffect } from 'react';
import { gsap } from 'gsap';
import $ from 'jquery';
import swal from 'sweetalert';
import {useHistory,withRouter} from 'react-router-dom';

import './LF.css';
import LoginLogo from './zmtLogo.png';

var LoginForm = (props) => {

let history = useHistory();

var Login = async ()=>{
        if(LoginData.email !== '' amp; LoginData.pass!== ''){

            history.push("/dashboard")

        }else{
            swal({
                title: "Incomplite fillup",
                icon: "warning"
            });
        }
    }

    return (
        <>
            <div className="l_main" ref={LOGbox}>

                <div className="login">
                    <p>Login Here!</p>

                    <div className="fillup">
                        <i className="far fa-envelope"></i>
                        <input onChange={LoginFillup} value={LoginData.email} id="userid" name="userid" type="text" placeholder="Email" />
                    </div>

                    <div className="fillup">
                        <i className="fas fa-lock"></i>
                        <input onChange={LoginFillup} value={LoginData.pass} id="pass" name="pass" type="password" placeholder="password" />
                        <i className="fas fa-eye" id="eye"></i>
                    </div>

                    <button onClick={Login}>Login</button>
                    <p id="signup">don't have an account?<span id="click_1" onClick={LeftSlider}>create</span> </p>
                    <p id="fo_p">Forget password</p>

                    
                </div>
                {/* <!-- .................................................................................................. --> */}
                <div className="signup">
                    <p>Signup Here!</p>

                    <div className="fillup">
                        <i className="fas fa-users"></i>
                        <input onChange={signupFillup} value={SignUpData.userName} id="user_name" name="user_name" type="text" placeholder="name" />
                    </div>

                    <div className="fillup">
                        <i className="far fa-envelope"></i>
                        <input onChange={signupFillup} value={SignUpData.email} id="user_em" name="user_em" type="text" placeholder="email" />
                    </div>

                    <div className="fillup">
                        <i className="fas fa-lock"></i>
                        <input onChange={signupFillup} value={SignUpData.pass} id="user_pass" name="user_pass" type="password" placeholder="password" />
                    </div>

                    <div className="fillup">
                        <i className="fas fa-lock"></i>
                        <input onChange={signupFillup} value={SignUpData.pass2} id="user_pass_2" name="user_pass_2" type="password" placeholder="password(re type)" />
                    </div>

                    <button onClick={Signup}>Register</button>
                    <p id="login">Already have an account.<span id="click_2" onClick={RightSlider}>login</span> </p>

                   
                </div>
                {/* <!-- ................................................................................................--> */}
                <div className="slider">
                    <div className="img_area">
                        <div className="close_tab" onClick={props.closefunction}>
                            close
                        </div>
                        <div className="img_sec">
                            <img src={LoginLogo} alt="" />
                        </div>
                    </div>
                </div>

            </div>
        </>
    )
};

export default LoginForm;
 

Я не совсем уверен, почему вы структурировали свой код как таковой, но LandingPage рендеринг the LoginForm в отдельный элемент DOM, отображаемый в a reactDom.render и, следовательно, не отображается в контексте маршрутизации. history действительно не определено.

 reactDom.render(
  <LoginForm closefunction={ClosePopup} />,
  document.getElementsByClassName("Lpopup")[0]
);
 

Обычно вы создаете портал React, однако после проверки логики целевой страницы я не думаю, что это необходимо, и предлагаю исправить следующее:

Целевая страница

Преобразуйте PopDisplay состояние в логическое значение, чтобы показать / скрыть «модальное», и условно отобразите раздел «Lpopup» и LoginForm .

 const [PopDisplay, setPopDisplay] = useState(false);

const DisplayPopup = () => {
  setPopDisplay(true);
};

const ClosePopup = () => {
  setPopDisplay(false);
};

...

{PopDisplay amp;amp; (
  <div className="Lpopup" style={{ display: "flex" }}>
    <LoginForm closefunction={ClosePopup} />
  </div>
)}
 

Теперь, когда это LoginForm отображается в том же приложении, оно должно иметь доступ к контексту маршрутизации, и useHistory перехват должен возвращать определенный history объект.

В react router dom v6 useHistory была заменена на usenavigate hook .

так и поступай

 import {useNavigate} from 'react-router-dom'

const App=()=>{
const history=useNavigate()
   return <>....</>
}
 

https://reactrouter.com/docs/en/v6/getting-started/overview
посмотри на это

Или понизьте версию react-router-dom, чтобы использовать перехват usehistory