React-router : 경로를 통해 구성 요소에 데이터 전달

경로, 원하는 경로 (슬러그), 해당 구성 요소 및 궁극적으로 하위 경로 (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>
    )
  }
})