So this is my main page :
import React from 'react';
import TopNav from '../components/nav/TopNav';
import LeftNav from '../components/nav/LeftNav';
import Title from '../components/nav/Title';
const Home = () => {
return (
<div className="home">
<TopNav/>
<LeftNav/>
<Title/>
<div className="homeContent">
<div id="topic">
<h1>Bonjour</h1>
</div>
<div id="content">
<script>
-> call component
</script>
</div>
</div>
</div>
);
};
export default Home;
and I have in my LeftNav :
import React from 'react';
import { NavLink } from 'react-router-dom';
const LeftNav = () => {
return (
<div className="leftNavigation">
<div className="leftNavigationBackground"></div>
<div className="leftNavigationContent">
<NavLink to={{pathname:"/",component:{selectedidds:"presentation"}}} activeClassName="nav-active" exact>Présentation</NavLink>
<NavLink exact to="/" activeClassName="nav-active">Compétences</NavLink>
<NavLink exact to="/" activeClassName="nav-active">Expériences</NavLink>
<NavLink exact to="/" activeClassName="nav-active">Formations</NavLink>
<NavLink exact to="/" activeClassName="nav-active">Passions</NavLink>
</div>
</div>
);
};
export default LeftNav;
As you can see in the LeftNav, I want to set a prop "component" with what ever I want inside, and when I click on the link, I simply want to make kind of a switch in script to call the component I need depending on the link I clicked.
Example : I click on a link that have in the prop component : "presentation" I want in my page body something like :
if (**component** == "presentation") {
<Presentation>
} elseif (**component** == "presentation2") {
<Presentation2>
}
I have a Home page, with a left bar navigation. When I click on links I don't want to load an other page, I want to load a component inside the content div of the const Home.
I hope I've been clear in my explications...
Thanks for help !
<script>
-> call component
</script>
replace that, with:
<Route path="/presentation1" component={Presentation} />
<Route path="/presentation2" component={Presentation2} />
now link to those routes and it will work like you want.
If you are on React Router v6 it would be:
<Routes>
<Route path="/presentation1" element={<Presentation />} />
<Route path="/presentation2" element={<Presentation2 />} />
</Routes>