Javascript 嵌套路由器同级

我一直在读这篇文章：有些人喜欢这篇文章，但我无法让我的案子运作起来

这里有两个repl在尝试文章中描述的每种方法——也许我错过了什么

如果您可以让这些REPL中的任何一个工作，我可能已经准备好了——但我更喜欢模块化的方法。谢谢你的帮助

模块化为路线

家
关于


const Home=（{children，match}）=>(
家
这是主页

第2页
第3页

)
const About=（{children，match}）=>(
关于
这是关于

第5页
第6页

)

航线周围的集装箱

家
关于

}/>
}/>

---

我有许多带有子页面的页面实例。我可以使用一个嵌套布局，但当我尝试在交换机下添加为同级时，当我尝试访问RouteC时，我得到了一个嵌套布局。如果我切换访问RouteA时得到的OOP。

此Repl是一个有效的解决方案：

有两个问题主要围绕着理解开关的思想。它从最大的特异性到最小的特异性

问题1）将根路径设置为最后一个，这是最不具体的

问题2）确保家长的“精确”为假

<Switch>
  <Route  path="/about" component={About} /> 
  <Route  path="/" component={Home} />
</Switch>

问题3）使用模块内的开关

// Home
<Switch>
  <Route exact path='/' component={Page1} />
  <Route exact path='/page2' component={Page2} />
  <Route exact path='/page3' component={Page3} />
</Switch>

// About
<Switch>
  <Route path='/about/page5' component={Page5} />
  <Route path='/about/page6' component={Page6} />
  <Route path='/about/' component={Page4} />
</Switch>

//主页
//关于

<Switch>
  <Route  path="/about" component={About} /> 
  <Route  path="/" component={Home} />
</Switch>

// Home
<Switch>
  <Route exact path='/' component={Page1} />
  <Route exact path='/page2' component={Page2} />
  <Route exact path='/page3' component={Page3} />
</Switch>

// About
<Switch>
  <Route path='/about/page5' component={Page5} />
  <Route path='/about/page6' component={Page6} />
  <Route path='/about/' component={Page4} />
</Switch>