React-Router Webpack将服务器逻辑从捆绑到客户端JavaScript中排除在外

Question

我正在制作一个同构的React应用程序，但是现在我被困在弄清楚如何使用react-router和webpack将服务器端逻辑排除在绑定到客户端javascript之外。

因此，我的webpack中有一个指向客户端 client javascript的“ client.js”入口。

import React from "react";   import Router from "react-router";  
import routes from "../shared/routes";

Router.run(routes, Router.HistoryLocation, (Handler, state) => {  
React.render(<Handler/>, document.getElementById('react-app')); });

“ client.js”包含反应路由器路由定义。

对于服务器端，我将epxress和路由设置为*（所有请求都路由到此处）

“server.js”

import routes from "../shared/routes";

app.get('/*', function (req, res) {   
    Router.run(routes, req.url, (Handler, state) => {
        let html = React.renderToString(<Handler/>);
        res.render('index', { html: html });     
    }); 
});

由于客户端和服务器共享相同的路由，如果我想在react-router中设置一个路由，例如/ attractions /：id，它将包含服务器端逻辑（数据库查询等），它将被webpack捆绑到client.js

因此，我想知道是否有一种方法可以仅保留由“ client.js”和“ server.js”共享的一个route.js，并使“ client.js”不捆绑某些服务器路由。

我提出了几种可能的解决方案。 但是希望看到最好的方法。

1. 保留两条路由，一条用于服务器，一条用于客户端，服务器路由是客户端路由的超集。
2. 向react-router添加另一层抽象，因此代替

<Route handler="/attraction/:id"/>

我可以使用“ ABCRouteController”中的导入ABC，ABCRouteController将确定它是节点还是客户端并生成路由或不生成路由。

class AppController extends React.Component {

    render () {

        let route;

        if #isServer
            route = <Route handler={#someHandler}" path="/">
        else
            route =""

        return route;
    }
}

3. 将特定的路由添加到server.js。 所以代替

app.get('/*', function (req, res) { 
    Router.run(routes, req.url, (Handler, state) => {
            let html = React.renderToString();
            res.render('index', { html: html });
    });
});

我们添加了用于处理纯服务器端逻辑的更具体的路由（类似于服务器和客户端的两个单独的react-router）