I’m building my firt react app, a website for a portfolio.
In this website, I want different pages, “portfolio” (or the home page), “3D renders”, “CV” and “Contact”, for the sike of simplicity let’s focus only on porfolio and contact.
So, In this app I have a menu.jsx component, and I want it to redirect the user to the corresponding page on click.
It used to work just fine doing this:
./app.jsx:
import React from 'react';
import './App.css';
import './assets/layer1.svg';
import Menu from './components/menu';
import Portfolio from './components/portfolio';
import Contact from './components/contact';
import {BrowserRouter as Router, Route, Routes, redirect } from 'react-router-dom'
function App() {
return (
<div>
<Menu/>
<Router>
<Routes>
<Route path="/portfolio" element={<Portfolio />}/>
<Route path="/contact" element={<Contact />}/>
<Route exact path="/" element={<Portfolio />}/>
</Routes>
</Router>
</div>
);
}
export default App;
and
./component/menu/index.jsx :
const Menu=()=>{
return(
<div>
<section class="menu">
<div class="elem" id="Portfolio">
<a href="http://localhost:5173/porfolio">Portfolio</a>
</div>
//<div class="elem" id="CV">CV</div>
//<div class="elem" id="3D Models">3D Models</div>
<div class="elem" id="Contact">
<a href="http://localhost:5173/contact">Contact</a>
</div>
</section>
<hr/>
</div>
);
}
export default Menu;
But this had a major issue, in fact, This was reloading the webpage everytime I was clicking on said links,losing every interest of an SPA (quick white loading screen, having to re dl the whole page etc…)
So I had an other idea, using a state variable that would drive the shown page.
Here’s what I’ve tried (I had to move the menu.jsx into the app.jsx to call the functions, if you know how I can call them in the same configuration as above it would help me too)
/App.jsx
import React from 'react';
import './App.css';
import './assets/layer1.svg';
import Menu from './components/menu';
import Portfolio from './components/portfolio';
import Contact from './components/contact';
import { BrowserRouter as Router, Route, Routes, redirect } from 'react-router-dom'
let PageState = window.location.pathname;
let page;
function GoContact() {
PageState = "/contact";
page= <Contact/> //Second thing I tried
console.log(PageState)
}
function GoPortfolio() {
PageState = "/porfolio";
}
function App() {
if (PageState == "/contact") {
page = <Contact />
}
else {
page = <Portfolio />
}
return (
<div>
<div>
<section class="menu">
<div class="elem" id="Portfolio" onClick={GoPortfolio} >Portfolio</div>
//<div class="elem" id="CV" onClick={GoPortfolio}>CV</div>
//<div class="elem" id="3D Models" onClick={GoPortfolio}>3D Models</div>
<div class="elem" id="Contact" onClick={GoContact}>Contact</div>
</section>
<hr />
</div>
{page}
</div>
);
}
export default App;
The idea was:
- When opening the page, it would land you on whatever you placed in the path name (ex: website/cv would land you directly on the CV page) This Worked just fine
- When clicking on an element of the menu, it would change the “page state” Var to whatever you clicked on
- This would change what’s in {page} with the right component
Changing the content on screen, without reloading the page (in theory).
In fact, it was calling the function just right, and even changing the “PageState” var, (I could verify using console.log(PageState) but it would not change anything on screen, I even tried directly adding page=<contact/> but it doesn’t change either.
My guess is that, even tho my variables are in fact changing, nothing tells react to actualize the content, so App.jsx is not a “loop” that would dynamicaly check for changes (idk if you see what I mean)
Anyway, I hope that I am clear enough,
Thank you to anyone helping 🙂
