如何在React Router中使用<Switch>来确保只渲染一个匹配的路由？

在React Router中，组件用于包裹组件，并确保只渲染第一个与当前URL匹配的。这对于避免渲染多个路由组件（如导航栏和侧边栏同时出现在页面上）非常有用。使用时，通常将其放在组件内部，并包裹所有的组件。例如：

<Router> 
<Switch> 
{/* 路由配置数组中的路由项会被映射为<Route>组件并渲染在这里 */} 
{config.map((route, index) => ( 
<Route 
key={index} 
path={route.path} 
render={props => ( 
<route.component {...props}> 
{/* 如果route.component是一个布局组件，并且它有childRoutes，则递归渲染它们 */} 
{route.childRoutes && route.childRoutes.map((childRoute, childIndex) => ( 
<Route 
key={childIndex} 
path={`${props.match.url}${childRoute