1

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

所以我的 webpack 有一个“client.js”的入口点，它是客户端包 javascript。

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”包含 react-router 路由定义。

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

“服务器.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 捆绑到客户端.js

所以我想知道是否有一种方法可以只保留一个由“client.js”和“server.js”共享的routes.js，并且让“client.js”不捆绑一些服务器路由。

我想出了几个可能的解决方案。但想看看最好的方法。

  1. 保留两条路由，一条给服务器，一条给客户端，服务器路由是客户端路由的超集。
  2. 为 react-router 添加另一层抽象，所以而不是

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

我可以使用 import ABC from "ABCRouteController" 和 ABCRouteController 将确定它是节点还是客户端并生成路由或不生成路由。

class AppController extends React.Component {

    render () {

        let route;

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

        return route;
    }
}
  1. 将特定路由添加到 server.js。所以而不是
app.get('/*', function (req, res) {
    Router.run(routes, req.url, (Handler, state) => {
            让 html = React.renderToString();
            res.render('index', { html: html });
    });
});

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

4

0 回答 0