Reactjs React如何使用React路由器创建要显示的子页面？

所以，我正在创建一个有下拉菜单的边栏，我不知道如何为我的子菜单创建一个显示页面或填充页面

下面是我的示例数据文件

 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>

我不明白如果链接到我的数据页，这将如何生成一个新页面

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

  <Link to={item.path}> 

---

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

您需要创建到子页面的路由（使用

）。您可以通过以下两种方式之一实现此目的。您可以在现有的

到

“/data”

的

旁边创建其他

并为基础数据路由提供

精确的
属性。或者，您可以将数据子页面的路由嵌套在
data
组件中，并拆分出一个单独的数据“主页”组件

这两种方法的主要思想相同，但在组织方式上有所不同。从长远来看，第二种方法更适合管理和扩展应用程序

第一种方法：



第二种方法（保持顶层路由不变，并更新
数据
组件，使其如下所示）：

函数数据（）{
返回(
);
}
导出默认数据；
函数DataHome（）{
返回(
数据页
);
}
函数SubData（）{}
函数SubData2（）{}
此方法与react router中为链接执行
数据/：id
的方法有什么区别？使用路由参数（
：id
）可以将数据从URL传递到呈现的组件，但只使用一个组件。因此，您可能有like
customers/:id
，只有
CustomerDetail
组件会呈现，但随后会知道要获取数据的客户的id。如果您愿意，您可以在这里使用这种方法，尽管它有点不标准，因为从那时起，您可以通过通常的React条件渲染控制哪个子页面组件，而不是使用内置的React路由器功能进行渲染。因此，就文件夹结构而言，即使它位于
/data/
路径下，我仍然需要创建一个新的.js文件，对吗？所以在我的pages文件夹中，我有3个单独的文件，每个文件名为Data.js、Subdata.js、Subdata2.js等等？我只说路径为
path=“/subdata”
，有什么区别？或者仅仅是页面组织结构将数据相关内容保留在路径
/data/subdata
中？组件不一定需要放在它们自己的文件/文件夹中，但这有助于组织。另外，
/data/subdata
的原因仅仅是基于您在问题中如何布置路线，但这完全取决于您，尽管如果内容似乎属于主
/data
路线，那么我会将其保留在那里。但是，如果您只将路径设为
/subdata
，那么组件可能不应该嵌套在
Data
组件下，正如我在第二种方法中所显示的那样（这种方式只对子例程有意义）。我最终弄明白了这一点。我刚刚导出了const SubData=（）=>{}
     <Route path='/data/:id' component={Data} />

  <Link to={item.path}>