React render component conditionally inside parent component on route click

Question

I'm trying to render a component conditionally inside a wrapper component from my main menu. I'm new to React, I was programming in Vue. Maybe this is why I can't find a "react solution" to my problem.

I have a navigation menu rendered from an array like this:

export default {
  {
    id: "home",
    title: "Inicio",
    navLink: "/home"
  
  },
  {
    id: "wrappercomponent",
    title: "Wrapper Component",
    children: [
      {
        id: "childcomponent1",
        title: "Child component 1",
        navLink: "/wrappercomponent/childcomponent1"
      },
      {
        id: "childcomponent2",
        title: "Child component 2",
        navLink: "/wrappercomponent/childcomponent2"
      }
    ]
  }
}

My routes are something like this:

const Routes = [
  {
    path: '/',
    index: true,
    element: <Navigate replace to={DefaultRoute} />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/wrappercomponent',
    element: <WrapperComp />
  }
  // and so on (this is an example)
}

What I need in my menu component is something like this:

import ComponentExtra from './componentextra'
import ComponentData from './componentdata'

const WrapperComp = () => {
  return (
    <>
      <div>
        <ComponentExtra />
      </div>
      <div>
        <ComponentData />
      </div>
      <div>
        {/* I need to render here childcomponent1 or childcomponent2 components according to menu link clicked */}
      </div>
    </>
  )
}

export default WrapperComp

I think I'm still "thinking in Vue" and I'm not able to find a solution despite hours of searching the web on how to do this.

Thanks in advance.

Answer 1

If I'm understanding your question correctly now, you want to conditionally render different components into the div element in WrapperComp based on a matched sub-route.

Render an Outlet component there and add nested routes to the "/wrappercomponent" route so they render their element content into the Outlet where you want the content.

Example:

import { Outlet } from 'react-router-dom';
import ComponentExtra from './componentextra'
import ComponentData from './componentdata'

const WrapperComp = () => {
  return (
    <>
      <div>
        <ComponentExtra />
      </div>
      <div>
        <ComponentData />
      </div>
      <div>
        <Outlet /> // <-- nested routes render content here
      </div>
    </>
  );
};

...

const routesConfig = [
  {
    path: '/',
    element: <Navigate replace to={defaultRoute} />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/wrappercomponent',
    element: <WrapperComp />,
    children: [
      { path: "childcomponent1", element: <Childcomponent1 /> },
      { path: "childcomponent2", element: <Childcomponent2 /> },
    ],
  },
  ...
};