Reactjs 反应路由器中的2级嵌套路由'；t在第一层正确布线

我正在尝试使用react路由器dom进行两级路由

目标：首先我们从几个部分中选择一个（例如F1/F2），然后我们可以从菜单中选择某个部分（新闻、公告等）特定于该部分的内容。我们应该可以随时切换部门

当前状态：仅当我们先选择一个分区，然后从菜单中选择某个内容时，它才起作用。当我们想要切换分区时（在玩菜单之后），路径以“/F2-2020/F2-2020”的形式断开

旧代码沙盒：

编辑： 我想重新组织代码，使App.js具有以下结构：

<Divisions /> <- here we choose first level of routing, eg. /F1-2020
<Menu /> <- here we choose second level of routing, eg. /F1-2020/news or eg. /GT3-ACC/news
<Content /> (Displays content based on the route)

---

分区路径缺少一个
/

[
{
路径：“/F1-2020”，
},
{
路径：'/F2-2020'，
},
{
路径：'/GT3-ACC'，
},
]

显示部门名称时，可以省略
/

<div>
  {division.path.slice(1)}
</div>


{division.path.slice（1）}

你太棒了！这管用！我永远也找不到答案。。。我非常感谢你的帮助亲爱的阿伦：）@Piaer没问题。很高兴提供帮助。亲爱的@Arun，不幸的是，我想重新组织代码，但我无法强制路由器工作。也许我在尝试一些不可能的事情？我很乐意得到提示。。。新的解释出现在主线程的“编辑”中。@Piaer我将分别创建两个不同的路由
/：divisionId
和
/：divisionId/：pageId
呈现
Division
和
Division Page
（页面引用新闻、公告等）组件。以这个为例，这很漂亮