React-router：通过路由将数据传递给组件

Question

我在数据对象的帮助下生成我的应用程序的路由，该数据对象包含有关路由、所需路径 (slug)、相应组件和最终子路由 (nestedRoutes) 的信息。如果路由具有嵌套路由，我想将它们作为数据对象传递给组件并在组件中使用它们，例如用于侧边栏导航。

路由工作正常，但我没有得到传递给组件的数据 nestedRoutes={route.nestedRoutes}。

如果喜欢请看我的代码片段：

var data = {

  "routes": [
    {
      "title": "MLS Styleguide",
      "slug": "/mls-styleguide",
      "component": MLSStyleguide,
      "nestedRoutes": [
        {
          "title": "Basic Typography",
          "slug": "/mls-styleguide",
          "component": Typography,
          "isIndexRoute": true
        },
        {
          "title": "Form & Fields",
          "slug": "/mls-styleguide/forms-fields",
          "component": FormsFields
        },
        {
          "title": "Form Sections",
          "slug": "/mls-styleguide/form-sections",
          "component": FormSections
        },
        {
          "title": "Filters",
          "slug": "/mls-styleguide/filters",
          "component": Filters
        },
        {
          "title": "Side Panels & Containers",
          "slug": "/mls-styleguide/side-panels-containers",
          "component": SidePanelsContainers
        },
        {
          "title": "Tiles & Content",
          "slug": "/mls-styleguide/tiles-content",
          "component": TilesContent
        },
        {
          "title": "Tooltips & Notifications",
          "slug": "/mls-styleguide/tooltips-notifications",
          "component": TooltipsNotifications
        }
      ]
    },
    {
      "title": "Playground",
      "slug": "/playground",
      "component": Playground
    }
  ]
}



module.exports = (
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>

    {data.routes.map(
      function(route) {
        if (route.nestedRoutes) {
          return (
            <Route path={route.slug} nestedRoutes={route.nestedRoutes} key={route.title} component={route.component}>

              {route.nestedRoutes.map(
                function(nestedRoute) {

                  if (nestedRoute.isIndexRoute) {
                    return (
                      <IndexRoute  key={nestedRoute.title} component={nestedRoute.component}/>
                    )
                  } else {
                    // {console.log(nestedRoute.slug)}
                    return (
                      <Route path={nestedRoute.slug} key={route.title} component={nestedRoute.component}/>
                    )
                  }
                }
              )}
            </Route>
          )
        } else {
          // console.log(route.slug)
          return <Route path={route.slug} foo="bar" key={route.title} component={route.component}/>
        }
      }
    )}
  </Route>
)

欢迎任何正确方向的评论或提示，谢谢！

编辑

接收组件的代码。请不要奇怪！ getInitialState() 函数中的链接数据目前用作解决方法。当组件实际收到 this.props.nestedRoutes 时，它将被删除。

希望你明白了！

export default React.createClass({
  getInitialState(){
    return {
      links: [
        {
          "title": "Basic Typography",
          "slug": "/mls-styleguide/"
        },
        {
          "title": "Form & Fields",
          "slug": "/mls-styleguide/forms-fields"
        },
        {
          "title": "Form Sections",
          "slug": "/mls-styleguide/form-sections"
        },
        {
          "title": "Filters",
          "slug": "/mls-styleguide/filters"
        },
        {
          "title": "Side Panels & Containers",
          "slug": "/mls-styleguide/side-panels-containers"
        },
        {
          "title": "Tiles & Content",
          "slug": "/mls-styleguide/tiles-content"
        },
        {
          "title": "Tooltips & Notifications",
          "slug": "/mls-styleguide/tooltips-notifications"
        },
      ]
    }
  },

  render() {
    return (
      <div>
        <Sidebar className="left">
          <SideNavbar links={this.state.links}/>
          {/*<SideNavbar links={this.props.nestedRoutes}/>*/}
        </Sidebar>
        <div className="content-container">
          {console.log(this.props.nestedRoutes)}
          <h2>MLS Styleguide</h2>

            {this.props.children}
        </div>
      </div>
    )
  }
})

Answer 1

看来我无法理解提供的解决方案。

但我找到了一个解决方法：我只是把数据放在一个单独的文件中，然后将其导入到两个文件中。它达到了目的，它很简单并且完成了。

感谢大家的支持！

React-router：通过路由将数据传递给组件

React-router: Passing data to component via route

json

reactjs

react-jsx

react-router