Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

129
Vistas
How to call a component with props given by a navlink in react?

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 !

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

<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>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda