如何使用动态路由

我已经是一个root route定义时定义反应路由器的IndexRoute：如何使用动态路由

./routes/Settings/index.js：

const rootRoute = { 
    childRoutes: [{ 
     path: '/', 
     component: require('./screens/Container'), 
     appGlobalVars: appGlobalVars, 
     childRoutes: [ 
      require('./routes/ListApps'), 
      require('./routes/Settings'), 
      require('./routes/Profile') 
     ] 
    }] 
}; 


var runApp = (appGlobalVars) => { 
    var routes = (
     <Provider store={store}> 
      <Router history={ history } routes={rootRoute} /> 
     </Provider> 
    ); 

    render(routes, document.getElementById('app')); 
};

和嵌套动态路由的一些设置：

module.exports = { 
    path: 'settings', 
    getComponent(nextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, require('../../screens/AppSettings')) 
     }) 
    }, 
    getChildRoutes(partialNextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, [ 
       require('./General'), 
       require('./Users') 
      ]) 
     }) 
    }, 
};

/settings是父组件，这使得{this.props.children}反应路由器通过。例如，如果我定位到/settings/general我要settings渲染，这反过来又会使general作为其子：

./routes/Settings/General.js

module.exports = { 
    path: 'general', 
    getComponent(nextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, require('../../screens/AppSettings/General')) 
     }) 
    } 
};

这是可以的，但我想要做的是定义默认的子组件Settings应该呈现如果导航到/settings。

总之：有没有办法在使用动态路由时定义类似IndexRoute的东西？

来源

2016-09-09 Bertuz

你试过用'getIndexRoute（）'吗？ – QoP

您应该使用getIndexRoute - https://github.com/reactjs/react-router/blob/master/docs/API.md#getindexroutepartialnextstate-callback

来源

2016-09-11 18:20:57 Vito

链接不再可用，我在React Router文档中看不到任何参考。 –

@nacho_dh'Link'现在在[react-router-dom]（https://www.npmjs.com/package/react-router-dom）中。但我不明白这与这个问题有什么关系。 – Vito

实际上，indexRoute需要一个看起来像{component：MyComponent}的路由对象，因为我意识到getComponent完全异步地返回，我在{}中使用了getComponent方法，并且解决了我的问题。 –

由于该方法getIndexRoutes已过时，我注意到，indexRoute期待的对象{组件：SomeCompoent}，这是由getComponent返回的对象的模式，所以我用getComponent来提供indexRoute如下：

export default (store) => ({ 
    path : 'shops', 
    childRoutes: [ 
    EditShopRoute(store), 
    ], 
    component: EntityLayout, // this renders always 
    indexRoute: { // this renders only when route matches exactly /shops 
    getComponent (nextState, cb) { 
    require.ensure([], (require) => { 
     const Shops = require('./containers/ShopsContainer').default 
     const reducerShop = require('./modules/shops').default 
     injectReducer(store, { key: 'shops', reducer: reducerShop }) 

     cb(null, Shops) 

    /* Webpack named bundle */ 
    }, 'shops') 
    } } 

})

来源

2017-07-12 18:20:40

如何使用动态路由

回答

相关问题