我正在使用react路由器v4和 bundle-loader 将我的代码拆分为块并使我的组件异步 . 此外,我正在使用快递服务器端,现在尝试使用反应路由器 StaticRouter 来预渲染我的反应应用程序 .

这是我的路线 .

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Bundle from 'shared/Bundle';
import LightApp from 'bundle-loader?lazy&name=lightApp!./LightApp';
import FinancialApp from 'bundle-loader?lazy&name=financialApp!./FinancialApp/index';

const bundler = (module) => (
    () => (
        <Bundle load={ module }>
            {
                (Comp) => Comp ? <Comp /> : <div>Loading</div>
            }
        </Bundle>
    )
);

const Routes = () => (
    <Switch>
        <Route exact path='/' component={ bundler(LightApp) } />
        <Route path='/(market|symbol)' component={ bundler(FinancialApp) } />
    </Switch>
);

export default Routes;

其中Bundle组件来自react路由器官方站点 .

这是我的服务器端脚本 .

import express from 'express';
import { renderToString } from 'react-dom/server';
import configureStore from './src/store';
import { Provider } from 'react-redux';
import InitialState from './src/reducers/initialState';
import StaticRouter from 'react-router-dom/StaticRouter';
import App from './src/components/App';
import config from './config';

let app = express();
let env = process.env.NODE_ENV || 'development';

app.disable('x-powered-by');

app.locals.ENV = env;
app.locals.ENV_DEVELOPMENT = env == 'development';

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

app.use(logger('dev'));


app.use(express.static(__dirname + '/dist', { maxAge: 86400000 * 7, lastModified: true }));

// handle app requests and server side rendering;
app.get('*', (req, res, next) => {
    let  markup = ReactDOMServer.renderToString(
        <StaticRouter location={req.url} context={}>
            <App />
        </StaticRouter>
    );

    res.render('index.ejs', {
        markup,
        state: {},
        assets: {
            bundle: assets['bundle'],
            vendor: assets['vendor'],
            styles: assets['styles']
        }
    });
})

app.use(function (req, res, next) {
    res.status(404);
});

app.use(function (err, req, res, next) {
    res.status(err.status || 500);

    if (err) {
        console.log(err);
    }

    res.json({
        message: app.locals.ENV_DEVELOPMENT ? err.message : 'Intrenal Server Error',
        error: err,
        title: 'error'
    });
});

app.listen(config.port, function () {
    console.log(`Finstead server listening on port ${ config.port }`);
});

但是使用带有 target: 'node' 的webpack我会得到分割的代码文件,它应该只有一个 server.js 文件而不是 0.server.js 1.server.js 等等,因为我不需要在服务器端进行代码分割 .

另外在我的开发环境中,我在服务器端使用babel-watch,我收到此错误

Error: Cannot find module 'bundle-loader?lazy&name=lightApp!./LightApp'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\Projects\finstead\client\src\components\Routes.jsx:4:1)
    at Module._compile (module.js:571:32)
    at babelWatchLoader (D:\Projects\finstead\client\node_modules\babel-watch\runner.js:50:13)
    at Object.require.extensions.(anonymous function) [as .jsx] (D:\Projects\finstead\client\node_modules\babel-watch\runner.js:61:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)

如何使用反应路由器v4进行延迟加载和服务器端渲染?提前致谢!