Reactjs react router v4 routerConfig为每条路由配置巨大的数据对象

我有一个routerConfig，如下所示，每个路由都有巨大的数据对象，用于渲染路由中的数据。对于大约

166条

路线，路线嵌套约为

depth=4

<代码>路由配置在应用程序的redux状态下可用。此routeConfig是不可变的，并在应用程序初始化时设置

[{
  path: '/category1',
  name: 'Category1',
  dataObj: {
    // ... very huge data object
  },
  childRoutes: [{
    path: '/subcategory1',
    name: 'Sub Category1',
    dataObj: {
      // ... very huge data object
    }
  },
  {
    // ... other child routes with nested children
  }]
},
{
  // ... other routes with nested children
}]

方法1

将每个路由的

dataObj

附加到容器道具，并在组件渲染中直接使用它

// routes.js
routerConfig.map(route => (
  <Route exact path={route.path} render={props => (
    <Container {...props} dataObj={route.dataObj} />
  )}
  />
)
});
/// ... nested routes are handled by recursive loop

// Container.js
render() {
  const {
    dataObj
  } = this.props
  /// ... use dataObj for rendering data
}

我想知道哪种方法在处理附加到每条路由的数据时更好。或者其他更好的处理数据的方法

---

建议使用

166

静态路由或者更好，使用参数的路由更少（50）条？

因为

dataObj

永远不会改变，所以只将它关联到

容器

一次就足够了，无需每次渲染

容器

时提取它，所以我认为第一种方法更好。使用第一种方法可以提高1中的性能。您可以使用功能组件，因为不需要连接到redux；2.您可以消除提取对象的影响（我想是很小的）。@MarsonMao谢谢。但在

内部将有70多条路线，每条路线都将有一个

集装箱

，集装箱上附有

dataObj

。那么，这种方法不会有太多性能问题吗？

// router.js
routerConfig.map(route => (
  <Route exact path={route.path} component={Container}/>
)
});
/// ... nested routes are handled by recursive loop

// Container.js
render() { // can be componentDidMount and set in state
  const {
   routeConfig,
   match: { path }
  } = this.props

  const dataObj = () => {
    // extract dataObj by filtering routeConfig with path
  }

  /// ... use dataObj for rendering data
}

const mapStateToProps = (state) => ({
  routeConfig: state.application.routeConfig
})