Рендеринг компонента внутри страницы реакции с использованием меню

Вам нужно использовать react-router-dom для навигации, когда вы нажимаете другой элемент MenuItem. Создайте свой собственный RouterProvider и разместите его в Контенте.

<Content>
 <RouterProvider router = {router}>
</Content>

РЕДАКТИРОВАТЬ

Теперь у вас есть два способа перейти к вашему компоненту. Сначала используйте ссылку и установите ее на свой ярлык.

{
  label: <Link title = "Rice" to = "/rice">Rice</Link>,
  key: 'rice', 
}

Второй способ — использование хукаNavigate

const navigate = useNavigate();
const onClick = (e)=>{navigate(`/${e.key}`)}
//Add to Menu
<Menu
  onClick = {onClick}
//other props
/>

Чтобы визуализировать компонент внутри другого компонента, React предоставляет специальное имя реквизита children.

Чтобы выполнить ваше требование, вы можете сделать следующее:

MainLayout.js:

export const MainLayout = ({children}) => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const navigate = useNavigate();
  const onClick = (e)=>{navigate(`/${e.key}`)}

  return (
    <Layout>
      <Sider>
        <Menu
          mode = "inline"
          items = {items2}
          onClick = {onClick}
        />
      </Sider>
      <Content>
        {children}
      </Content>
    </Layout>
  )
}

В MainLayout.js вам нужно только написать {children} внутри компонента <Content>, React сделает все остальное, чтобы вы передали содержимое Rice или AB или что-то еще для вас. На каждой странице просто поместите <MainLayout> в верхней части остального кода.

См. 2 примера файлов ниже.

Рис.js:

import MainLayout from './MainLayout';

export const Rice = () => {
  // Do some stuffs here...

  return (
    <MainLayout>
      <div>
        <h2>Best rated rice in the World</h2>
        <ol>
          <li>Pinipig</li>
          <li>Riz de Camargue</li>
          ...
        </ol>
      <div>
    </MainLayout>
  )
}

Кукуруза.js:

import MainLayout from './MainLayout';

export const Corn = () => {
  // Do some stuffs here...

  return (
    <MainLayout>
      <div>
        <h2>Best Corn Side Dish Recipes</h2>
        <ol>
          <li>Whipped-Cream Corn Salad</li>
          <li>Classic Grilled Corn on the Cob</li>
          ...
        </ol>
      <div>
    </MainLayout>
  )
}

Вы можете прочитать больше и поэкспериментировать с примером кода из официальных документов React.

Это основная концепция React, поэтому, прежде чем вы начнете создавать что-то большое, я предлагаю сначала следовать этой документации или найти несколько руководств по React для начинающих, они объяснят ключевые концепции React, чтобы вы не экономили больше времени.