I am taking email and password from the user and if password matches user will be redirected to account page.

Login page:

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { useNavigate } from 'react-router-dom';
import Account from "./account";
const Login = () =>  {
    const navigate = useNavigate();
    const [products, setProducts] = useState([]);
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

  
    const Submit = async (e) => {
      e.preventDefault();

      const { data } = await Axios.get(
        `http://localhost:8080/api/login/${email}`
      );
      let parseData = JSON.parse(data.response);
  
      setProducts(parseData);
      console.log(password);
      console.log(products.password);


   if(products.password==password){
    window.isLoggedin=1;
    <Account props={products} />
    navigate(`/account`)

   }
   else{
    navigate(`/sign-in`)

   }

        
      
    };




    return (
      <form   >
        <h3>Sign In</h3>
        <div className="mb-3">
          <label>Email</label>
          <input
            type="email"
            name="email" 

            className="form-control"
            placeholder="Enter email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            name="password" 

            className="form-control"
            placeholder="Enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div className="d-grid">
          <button type="submit" onClick={Submit} className="btn btn-primary">
           Sign In
          </button>
        </div>
        <p className="forgot-password text-right">
          Not registered <a href="/sign-up">sign up?</a>
        </p>
      </form>

    )
    


}

export default Login;

Account Page:

import React, { useState, useEffect } from "react";
import './account.css';
import { useNavigate } from 'react-router-dom';
import Login from "./login";

const Account = (props) =>  {

    const navigate = useNavigate();

    const check =()=>{
        console.log(props.email);

        if(window.isLoggedin==0)
        navigate(`/sign-in`)
    }
  useEffect(() => {
    check();
  }, []);



    return (
    
<div >
    <div >
        <div > 
            <h3 >Username</h3>
            
            <div >
            
              <div >
                <h5>Email</h5>
                <span >10</span>
              </div>
              <div >
              <h5>Location</h5>
                <span >10</span>
              </div>
              <div >
              <h5>{props.products}</h5>
                <span >10</span>
              </div>
            
            </div>
            
            <hr ></ hr>
            
              <div > 
               <button ><i ></i> </button> 
               <button ><i ></i></button> 
               <button ><i ></i> </button> 
               <button ><i ></i> </button>
               <button ><i ></i> </button>
              </div>
              
             <div >
             
             <button  >Log Out</button>

        </div>
               
        </div>
    </div>
</div>
    );

}

export default Account;

Here i want to pass products array from Login page to Account page. Please guide me how to send data from one page to another in react JS. I did some solutions availabe but i am unable to pass the data.

CodePudding user response：

You can use localStorage to save your products array from Login component then getlocalStorage at Acount component.(context,useReducer,redux).

CodePudding user response：

You aren't returning the Account component here:

if(products.password==password){
    window.isLoggedin=1;
    <Account props={products} />
    navigate(`/account`)

   }
   else{
    navigate(`/sign-in`)

}

Return it like this:

return <Account props={products} />

CodePudding user response：

This Stackoverflow post describes how to pass data from one page to another, using useNavigate and useLocation.