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: 
  },
  {
    path: '/home',
    element: 
  },
  {
    path: '/wrappercomponent',
    element: 
  }
  // 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 (
    <>
      
        
      
      
        
      
      
        {/* I need to render here childcomponent1 or childcomponent2 components according to menu link clicked */}
      
    
  )
}

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.

Drew Reese · Answer

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 (
    <>
      
        
      
      
        
      
      
         // <-- nested routes render content here
      
    
  );
};

...

const routesConfig = [
  {
    path: '/',
    element: 
  },
  {
    path: '/home',
    element: 
  },
  {
    path: '/wrappercomponent',
    element: ,
    children: [
      { path: "childcomponent1", element:  },
      { path: "childcomponent2", element:  },
    ],
  },
  ...
};

React render component conditionally inside parent component on route click

1 Answers