因此，我正在创建一个具有下拉菜单的边栏，但无法弄清楚如何为子菜单创建显示页面或填充页面。

这是我的示例数据文件

 const dropdownData = [
      {
         title: "Data',
         path: '/data',
         dropdownItems: [
          {
            title: 'Sub Data',
            path: '/data/subdata',
           },
           {
             title: 'Sub Data 2',
            path: '/data/subdata2',
           },
         ]
       }
     

因此，在我的App.js中，我通常只会在一页上执行此操作

   <Router>
    <Sidebar />
    <Switch>
      <Route path='/data' component={Data} />
    </Switch>
  </Router>

然后，我用Data.js页面创建一个页面文件夹，并仅显示如下填充文本

      import React from 'react';

      function Data() {
        return (
          <div className='data'>
            <h1>Data Page</h1>
          </div>
        );
      }

      export default Data;

因此，如果我单击数据菜单链接，它将仅显示"Data page"在屏幕上。

但是我不知道如何显示子菜单的“假”预览页面？

理想情况下， "This is the sub data page"

我已经看过使用示例，:id但是我不知道如何在视觉上显示它？

     <Route path='/data/:id' component={Data} />

如果链接到我的“数据”页面，我不知道如何生成一个新页面？

现在，我只是链接到我的路径

  <Link to={item.path}> 

当我单击子菜单时，它会在URL上显示数据/子数据，但是我不知道如何创建子菜单数据页并实际在屏幕上直观地显示它？