如何创建路径仅ID不同的多个React Route路由

你的代码无法正常工作的核心原因是**forEach没有返回值**——它仅遍历数组执行回调逻辑，不会生成可供React渲染的元素数组。要动态创建Route路由，需要改用map方法，它会返回包含JSX元素的数组，React可直接渲染该数组。

修改后的代码如下：

{Object.keys(this.state.machines).map((key) => (
  <Route
    key={key}
    exact
    path={`/machine${key}`}
    render={() => (
      <MachineComposition machine={this.state.machines[key]} />
    )}
  />
))}

额外注意几个细节：

• 必须给每个Route添加key属性，值使用唯一的key，这是React列表渲染的强制要求，可避免渲染警告
• 把component换成render属性：如果用component={() => ...}的写法，每次父组件渲染都会创建新的组件实例，可能引发不必要的组件重挂载，render属性在性能和稳定性上更优
• 使用模板字符串/machine${key}替代字符串拼接，语法更简洁易读

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