反应嵌套路由问题答案

【问题标题】：React Nested routing issue反应嵌套路由问题
【发布时间】：2015-12-04 05:39:16
【问题描述】：

我的路由器如下所示，

[
  { 
    path: '/',
    component: App,
    childRoutes: [
      { 
        path: 'dashboard', 
        getComponent: function(location, cb) {
            require.ensure([], function(require) {
              cb(null, require('../plugins/dashboard/index'))
            })
        },
        childRoutes: [
            {
                path: '/:id', 
                getComponent: function(location, cb) {
                    require.ensure([], function(require) {
                      cb(null, require('../plugins/dashboard/saved_dashboard'))
                    })
                }
            }
        ]
      },
      { 
        path: 'profile',
        getComponent: function(location, cb) {
            require.ensure([], function(require) {
              cb(null, require('../plugins/profile/index'))
            })
          }
      }
    ]
  }
];

我的菜单组件示例代码看起来像

<ul id='menu'>
  <li>
    <Link to='dashboard'>dashboard</Link>
  </li>

  <li>
    <Link to='dashboard/mydashboard'>my dashboard</Link>
  </li>

  <li>
    <Link to='profile'>profile</Link>
  </li>
</ul>

问题是当我点击“我的仪表板”时，它会路由到

localhost/dashboard/mydashboard

如果我再次点击“我的仪表板”，它将从这里路由到

localhost/dashboard/mydashboard/dashboard/mydashboard

继续前进。

如何解决这个问题？我在哪里做错了？还是我必须在配置中做更多的事情？

【问题讨论】：

标签： reactjs react-router react-router-component react-routing

【解决方案1】：

原因是Link 的to 参数采用绝对路径，而您的路径是相对路径...

所以要修复它，它应该如下所示：

<ul id='menu'>
  <li>
    <Link to='/dashboard'>dashboard</Link>
  </li>

  <li>
    <Link to='/dashboard/mydashboard'>my dashboard</Link>
  </li>

  <li>
    <Link to='/profile'>profile</Link>
  </li>
</ul>

【讨论】：