React使用BrowserRouter基于字符串路径列表创建动态路由的实现问题

错误原因 #

• 循环范围不对：for (var i = 0; i < path.length-1; i++) 会少遍历数组最后一个元素，路径数组里的wellbeing不会被生成对应路由
• 路径拼接缺斜杠：硬编码实现里你在basePath和具体路径中间加了/，但动态实现里漏了这个斜杠，生成的路径格式错误匹配不上
• JSX语法不支持直接内嵌for循环输出元素：需要用数组map方法遍历生成路由元素，同时要给每个Route添加唯一key属性，符合React列表渲染要求

修正后可运行代码 #

render() {
  // 后续新增路径只需要修改这个数组即可
  const pathList = ["physical-health","general-health","wellbeing"];
  return(
    <BrowserRouter history={history}>
      <div className="">
        <div id="maincontent">
          {pathList.map(pathItem => (
            <Route 
              key={pathItem}
              exact 
              path={`${this.state.basePath}/${pathItem}`} 
              render={() => <Welcome />} 
            />
          ))}
        </div>
      </div>
    </BrowserRouter>
  );
}

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