Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

125
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda