I am making a multi-page Online Store web application and I currently stuck on how I pass the user’s input (username) into the welcome message that will show up after logging in such as “weclome back {username}” I am new to react.js so I am trying to keep it simple so I tried to useLocation
but it was unsuccessful I was wondering I needed to rewrite my coded or i was thinking to use props? please help??
app.js
<code>// import react router dom and components //
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Products from "./components/Products";
import About from "./components/About";
import LoginPage from "./components/LoginPage";
import NavMenu from "./components/NavMenu";
import "./App.css";
// Create the App component //
function App() {
return (
<div className="App">
<header className="App-header"></header>
<NavMenu />
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/Products" element={<Products />} />
<Route path="/About" element={<About />} />
<Route path="/LoginPage" element={<LoginPage />} />
</Routes>
</div>
);
}
export default App;
</code>
<code>// import react router dom and components //
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Products from "./components/Products";
import About from "./components/About";
import LoginPage from "./components/LoginPage";
import NavMenu from "./components/NavMenu";
import "./App.css";
// Create the App component //
function App() {
return (
<div className="App">
<header className="App-header"></header>
<NavMenu />
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/Products" element={<Products />} />
<Route path="/About" element={<About />} />
<Route path="/LoginPage" element={<LoginPage />} />
</Routes>
</div>
);
}
export default App;
</code>
// import react router dom and components //
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Products from "./components/Products";
import About from "./components/About";
import LoginPage from "./components/LoginPage";
import NavMenu from "./components/NavMenu";
import "./App.css";
// Create the App component //
function App() {
return (
<div className="App">
<header className="App-header"></header>
<NavMenu />
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/Products" element={<Products />} />
<Route path="/About" element={<About />} />
<Route path="/LoginPage" element={<LoginPage />} />
</Routes>
</div>
);
}
export default App;
home.js
<code>// import react, useState and useNavigate hooks //
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
// create Home component //
export default function Home() {
// Create login state variables //
const [login, setLogin] = useState("");
const navigate = useNavigate();
function loginBtn() {
if (!login) {
alert("please enter user login");
return;
}
}
function handleClick() {
if (!login) {
alert("please enter user login");
return;
}
loginBtn();
}
return (
<div>
<header>
<h1>Welcome to the Homepage</h1>
<div>
<label>
Name:
{/* Input field for user's login */}
<input
type="text"
defaultValue={login}
placeholder="Enter Login here"
onChange={(e) => setLogin(e.target.value)}
/>
{/* login button to execute useNavigate function */}
<button
onClick={() => {
handleClick();
navigate("/LoginPage", { state: { login: "" } }); {/* attempt to pass username */}
}}
>
Login
</button>
</label>
</div>
</header>
</div>
);
}
</code>
<code>// import react, useState and useNavigate hooks //
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
// create Home component //
export default function Home() {
// Create login state variables //
const [login, setLogin] = useState("");
const navigate = useNavigate();
function loginBtn() {
if (!login) {
alert("please enter user login");
return;
}
}
function handleClick() {
if (!login) {
alert("please enter user login");
return;
}
loginBtn();
}
return (
<div>
<header>
<h1>Welcome to the Homepage</h1>
<div>
<label>
Name:
{/* Input field for user's login */}
<input
type="text"
defaultValue={login}
placeholder="Enter Login here"
onChange={(e) => setLogin(e.target.value)}
/>
{/* login button to execute useNavigate function */}
<button
onClick={() => {
handleClick();
navigate("/LoginPage", { state: { login: "" } }); {/* attempt to pass username */}
}}
>
Login
</button>
</label>
</div>
</header>
</div>
);
}
</code>
// import react, useState and useNavigate hooks //
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
// create Home component //
export default function Home() {
// Create login state variables //
const [login, setLogin] = useState("");
const navigate = useNavigate();
function loginBtn() {
if (!login) {
alert("please enter user login");
return;
}
}
function handleClick() {
if (!login) {
alert("please enter user login");
return;
}
loginBtn();
}
return (
<div>
<header>
<h1>Welcome to the Homepage</h1>
<div>
<label>
Name:
{/* Input field for user's login */}
<input
type="text"
defaultValue={login}
placeholder="Enter Login here"
onChange={(e) => setLogin(e.target.value)}
/>
{/* login button to execute useNavigate function */}
<button
onClick={() => {
handleClick();
navigate("/LoginPage", { state: { login: "" } }); {/* attempt to pass username */}
}}
>
Login
</button>
</label>
</div>
</header>
</div>
);
}
loginPage.js
<code>// import react and useNavigate
import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
export default function LoginPage() {
const navigate = useNavigate();
const location = useLocation();
// function login() {
// props.setUsername(props.username);
// }
return (
<div>
<header>
<h1>Welcome {location.state.login} !</h1>
<div>
{/* logout button to execute useNavigate function */}
<button onClick={() => navigate(-1)}>Logout</button>
</div>
</header>
</div>
);
}
</code>
<code>// import react and useNavigate
import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
export default function LoginPage() {
const navigate = useNavigate();
const location = useLocation();
// function login() {
// props.setUsername(props.username);
// }
return (
<div>
<header>
<h1>Welcome {location.state.login} !</h1>
<div>
{/* logout button to execute useNavigate function */}
<button onClick={() => navigate(-1)}>Logout</button>
</div>
</header>
</div>
);
}
</code>
// import react and useNavigate
import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
export default function LoginPage() {
const navigate = useNavigate();
const location = useLocation();
// function login() {
// props.setUsername(props.username);
// }
return (
<div>
<header>
<h1>Welcome {location.state.login} !</h1>
<div>
{/* logout button to execute useNavigate function */}
<button onClick={() => navigate(-1)}>Logout</button>
</div>
</header>
</div>
);
}