Now I'm trying to learn React and how to build a single Page application without a redirect page. so every change UI will just trigger by the button. However, I'm struggling with how to implement it if the trigger button is on another view...
I build a simple code to change the route view from <Home/> to <Payment/> with a button.
app.js
import React, {useState, useEffect} from 'react';
import Home from './views/Home';
import Payment from './views/Payment';
import Header from './components/Header';
import Footer from './components/Footer';
function App(props) {
const [changePage, setPage] = useState(false);
useEffect(() => {
console.log(changePage);
if (changePage) {
setPage(true);
}
} );
const handleClick = () => setPage(true);
return (
<div>
<Header/>
<button onClick={!changePage ? handleClick : null} >
Goto Payment
</button>
{changePage ? <Payment/> : <Home/>}
<Footer/>
</div>
);
}
export default App;
The above code can work when clicking the button. However, I plan to move the trigger button from app.js to ./view/Home, so the code on ./view/home I set with this code
import React from 'react';
function Home(props) {
return (
<div>
HOME
<button onClick={!changePage ? handleClick : null} >
Goto Payment
</button>
</div>
);
}
export default Home;
but it returns an error
Compiled with problems:X
ERROR
src/views/Home.js
Line 8:31: 'changePage' is not defined no-undef
Line 8:44: 'handleClick' is not defined no-undef
Search for the keywords to learn more about each error.
From my code, how do I able to set the trigger button on file ./view/Home but still change the page on app.js...
please help
handleClick and changePage not available Home file, you need to pass props to Home Component. (changePage is not required as it is always false to Home)
pass prop
{changePage ? <Payment/> : <Home handleClick={handleClick} />}
Use prop handleClick
<div>
HOME
<button onClick={prop.handleClick} >
Goto Payment
</button>
</div>
I highly encourage you to look into the React Router version 6. You are render the children component with nested routes.
You can pass any child component to be rendered:
function App() {
return (
<Routes>
<Route path="Home" element={<Home />}>
<Route path=index element={<Home />} />
<Route path=":id"element={<Payment />} />
</Route>
</Routes>
);
}
And inside the Home component you can use the Outlet as the placeholder Which will be replaced by the component you passed. And use useNavigate hooks to toggle the child component
https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes
Actually for that purpose you don't need all that codes. take off useState and useEffect. simply use useNavigate and run this code as below for Home to Pyment
import React from 'react';
import { useNavigate } from "react-router-dom";
function Home(props) {
const navigate = useNavigate();
return (
<div>
HOME
<button onClick={() => {
navigate(`/views/Payment`);
}} >
Goto Payment
</button>
</div>
);
}
export default Home;