Javascript 反应路由菜单-数据处理最佳实践

我正在尝试为我的React应用程序创建一个菜单，如下所示：

清单本身就很简单。但现在我有了主组件，它包含两个子组件：

class App extends Component {
  render() {
    return (
      <MenuBar/>
      <DisplayPane/>
    )
  }
}

class DisplayPane extends Component {
  render() {
    return (
      <Route path="/a" component={A} />
      <Route path="/b" component={B} />
      <Route path="/c" component={C} />
    )
  }
}

但现在我有一个问题，每当我想添加/删除/修改组件/路由时，我需要在两个地方进行更新，这对我来说没有意义

---

这是处理这种情况的react方法，还是在react中执行此类菜单的某种模式，以便维护更合理？

对我来说似乎不错。但是，如果您想要更通用的方法，您可以创建一个单独的文件来存储实际的组件绑定及其路由，并通过迭代动态生成路由及其链接。你可以这样做：

Route.js 您可以在

Route.js

中导入组件，并将它们映射到

component

属性。 您可以在

显示窗格

和

菜单栏

中导入

Route.js

，并对其进行迭代以生成动态路由

DisplayPane.js

类显示窗格扩展组件{
render（）{
返回routesObj.map（（路由，索引）=>{
返回
})
}
}

---

同样，您也可以在

菜单栏

中导入相同的对象，并在那里使用

映射

渲染

链接

。这样，您只需在数组中创建另一个对象，map就会为您解决问题。

我不太清楚这种方法的问题是非常有害还是有一点：这个Route.js充其量是util，在这种方法中，util正在导入组件，破坏层结构

export default [
    {
        path : "/a",
        component : A,
        target : "",
        isExact : true // You can add more objects to configure your route/link
    },
    {
        path : "/b",
        component : B,
        target : "",
        isExact : true
    },
    {
        path : "/c",
        component : C,
        target : "",
        isExact : true
    },
]

class DisplayPane extends Component {
    render() {
      return routesObj.map((route,index)=> {
          return <Route key={index} exact={route.isExact} path={route.path} component={route.component}/>
        })
    }
  }