Javascript Reactjs-单击特定页面上的按钮时创建动态子菜单项

嗨，我是Reactjs新手，正在尝试从ReactGurus那里获得帮助

layout.js有侧边栏菜单和子菜单项

<Router>
  <Layout style={{ minHeight: '100vh' }}>
    <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
      <div className="logo" />
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
        <Menu.Item key="1" icon={<ImportOutlined /> } >
        <Link to="/import">
        <span>Import</span>
        </Link>
        </Menu.Item>
        <SubMenu key="sub1" icon={<CodeOutlined />} title="Organizer">
          <Menu.Item key="3"><Link to="/next-item"><span>emp.py</span></Link></Menu.Item>
          <Menu.Item key="4">Bill</Menu.Item>
          <Menu.Item key="5">Alex</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
          <Menu.Item key="6">Team 1</Menu.Item>
          <Menu.Item key="8">Team 2</Menu.Item>
        </SubMenu>
        <Menu.Item key="9" icon={<FileOutlined />}>
          Files
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout className="site-layout">
      <Header className="site-layout-background" style={{ padding: 0 }} />
      <Content style={{ margin: '0 16px' }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
        <Switch>
        <Route exact path="/" component={GetDataAPI}>
        </Route>
        <Route path="/import" component={GetDataAPI}>
        </Route>
        <Route path="/next-item">
          <h1>Second Page</h1>
        </Route>
      </Switch>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Revelation ©2021 Created by Revelation Team</Footer>
    </Layout>
  </Layout>
</Router>

进口
emp.py
比尔
亚历克斯
第一队
第二小组
文件夹
第二页
启示录©2021由启示录团队创建

GetDataAPI.js->当我单击submit按钮时，它调用handleSubmit并从API获取数据。 api返回的数据需要传递到layout.js，并在侧栏上构建动态链接。 API返回电影名称，并希望动态创建eah电影名称的子菜单项。一旦我点击子项上的特定电影名称，它就会转到特定电影[0,1…].js

拍电影

---

我使用的是antd布局模板。我在谷歌搜索了很多次，但都没能做到。谢谢你的帮助

您应该在这样的平台上为我们提供一个最小的可行示例，以便我们更好地理解您的代码。