React-router4如何对象式配置路由?

#1

我想类似vue那种配置方式来写,结果直接报错了。请问怎么去修改?

#2

我是采用的这种方式。

#3
import {renderRoutes} from 'react-router-config';
import routes from './routes';

const renderApp = () => {
    render(
        <Provider store={store}>
            <HashRouter basename={appDomain}>
              {renderRoutes(routes)}
            </HashRouter>
        </Provider>,
        document.querySelector('.container')
    );
};

./routes

export default [
    {
        path: '/login',
        component: Login
    },
    {
        component: App,
        routes: [
            {
                path: '/',
                exact: true,
                component: AppIntentList
            },
            {
                path: '/:appId/entity/create',
                component: AppEntityCreate
            },
            {
                path: '/:appId/entity/:entityId/edit',
                component: AppEntityEdit
            },
            {
                path: '/:appId/',
                component: AppChild,
                routes: [
                    {
                        path: '/:appId/intent/list',
                        component: AppIntentList
                    },
                    {
                        path: '/:appId/entity/list',
                        component: AppEntityList
                    },
                    {
                        path: '/:appId/chatflow',
                        component: ChatFlow
                    },
                    {
                        path: '/:appId/nlu/list',
                        component: AppNluList
                    },
                    {
                        path: '/:appId/scheduling',
                        component: AppSchedulingPolicy
                    },
                    {
                        path: '/:appId/',
                        component: AppSchedulingPolicy
                    }
                ]
            }
        ]
    }
];

具体可以看看 React Router Config

#4

感谢实例提供