javascript - 如何使用 React Router 处理带有延迟加载组件的面包屑？

Question

我一直在寻找有关如何处理延迟加载路由的面包屑的示例。我已经能够让它在服务器上正常工作，但无法获取客户端上被 getComponent() 屏蔽的延迟加载组件。如何访问异步组件？

routes.js

module.exports = {
    component: Layout,
    childRoutes: [
        {
            path: '/',
            component: App,
            childRoutes: [
                {
                    path: '/lazy',
                    component: Lazy, // Lazy loaded component
                }
            ]
        }
    ]
};

Lazy.js

// Server polyfill
if (typeof require.ensure !== 'function') { require.ensure = function(d, c) { c(require) }; }

module.exports = {
    path: 'detail',
    getComponent: function(location, cb) {
        require.ensure([], (require) => {
            cb(null, require('./components/Detail')); //Component I want to access
        });
    }
};

Breadcrumbs.js

import React, { Component, PropTypes } from 'react';

class Breadcrumbs extends Component {
    static propTypes = {
        routes: PropTypes.array.isRequired
    };

    render() {
        const { routes } = this.props;
        return (
            <ol className="breadcrumbs">
                {routes.map((route, index) => {
                    return (
                        <li key={index}>{route.component.title}</li>
                    );
                })}
            </ol>
        );
    }
}

export default Breadcrumbs;

问题是异步路由看起来像:

{
    path: 'detail',
    component: {
        getComponent: function()
    }
}

而不是:

{
    path: 'detail',
    component: {
        title: 'Lazy Detail'
    }
}

Answer 1

我只是输入 title 而不是你所拥有的。在路由对象而不是组件上 - 这应该可以解决您的问题并为您提供更多的灵 active 。

如果必须这样做，您可以使用自定义 RoutingContext ，但这是一个半私有(private) API，可能会在 v1.1.x 中消失。一般来说，在 <Route> 上定义它似乎更清晰。不过。