Así que esta es mi página principal:

 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;

y tengo en mi 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;

Como puede ver en LeftNav, quiero establecer un "componente" de apoyo con lo que quiera dentro, y cuando hago clic en el enlace, simplemente quiero hacer una especie de cambio en el script para llamar al componente que necesito dependiendo en el enlace en el que hice clic.

Ejemplo: hago clic en un enlace que tiene en el componente de apoyo: "presentación" Quiero en el cuerpo de mi página algo como:

 if (**component** == "presentation") { <Presentation> } elseif (**component** == "presentation2") { <Presentation2> }

Tengo una página de inicio, con una barra de navegación a la izquierda. Cuando hago clic en los enlaces, no quiero cargar otra página, quiero cargar un componente dentro del div de contenido de const Home.

Espero haber sido claro en mis explicaciones...

Gracias por la ayuda !