React-Router：用<Switch>包裹路由数组映射时出现错误

const sections = ['section1', 'section2', 'section3'];

<Switch>
  {/* 若浏览器仅加载/section/，重定向至第一个路由 */}
  <Route exact path="/section" render={() => (<Redirect to="/section1/home" />)} />
  
  {/* 遍历sections数组（移除外层div，key移到Route上） */}
  {this.state.sections.map((section, sectionIndex) => (
    <Route
      key={sectionIndex}
      path={`/section/${section}/home`}
      render={() => (<Section testProp={'test'} />)}
    />
  ))}
  
  {/* 404页面 */}
  <Route component={NoMatch} />
</Switch>

额外优化建议 #

• 用ES6模板字符串拼接路径（/section/${section}/home）比加号拼接更简洁易读；
• 如果sections数组里的每个section值是唯一的，建议用section作为key（而不是index），这能避免列表渲染时的性能问题；
• 始终确保Switch的直接子元素只有或，不要嵌套任何其他DOM组件或自定义组件。

这样修改后，Switch会把computedMatch正确传递给组件（Route内部会处理这个prop），不会传到DOM元素上，警告就会消失，同时动态生成路由、传递props和404页面的功能也都能正常工作。

内容的提问来源于stack exchange，提问作者Matt