• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

90
Views
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 !

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

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>
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error