react-router路由之routerRender方法（v5 v6）

Posted 2023-04-16

参考技术A 安装路由

安装 react-router-dom 的即已附带 react-router 核心包

直接使用使用 Route 组件完成类似于 vue 的 router-view + routes 的布局

通过类 routes 配置文件和相关封装函数完成便捷性路由布局

总结：

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

【中文标题】React-router：通过路由将数据传递给组件

【英文标题】：React-router: Passing data to component via route

【发布时间】：2016-10-14 22:40:20

【问题描述】：

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

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

如果你喜欢请看一下我的代码 sn-p:

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>
    )
  
)

【问题讨论】：

那么你的if(route.nestedRoutes)通过成功了，但是在创建Route组件时，nestedRoutes prop是未定义的？

对，@Maggie！当我在特定组件中尝试 console.log(this.props.nestedRoutes) 时，我得到一个 undefined :(

能贴出Route组件的代码吗？

更新了组件代码，感谢关注！

为什么react-router 应该将道具传递给您的组件？您可以像这样在路由中传递参数：<Route path=nestedRoute.slug + '/:' + someParameter key=route.title component=nestedRoute.component/>，您将能够在组件内部的this.props.params.someParameter 中检索此参数。这是你不想达到的目标还是我弄错了？

【参考方案1】：

我似乎无法理解所提供的解决方案。

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

感谢大家的支持！

【讨论】：

"没有人知道通过将数据对象通过路由传递给组件来解决问题的方法。"。这是不真实的。我刚刚向您展示了将您自己的 props 传递给 cmets 中的组件的方法。

我不想侮辱你，所以我更新了我的答案。但是对不起，我真的不明白你的建议。