Question

我正在尝试将express添加到我的React项目中，以便开始连接到数据库以存储表单信息。我很失落如何设置它。目前我正在使用webpack并创建一个渲染我的React视图的开发服务器。我的堆栈看起来像......

Webpack - React - Babel - SASS。

React Router目前处理我的所有导航链接到我的页面，我几乎按照我想要的方式在我的localhost上运行它。所以现在我必须想办法处理联系人表单数据并将其放入我为项目创建的mongoDB中。在过去，我使用快递w /把手＆amp; mongoose连接到mongoDB，所以我想让我们为项目添加快递！我不知道如何将服务器连接到我的反应应用程序，以及它将如何与webpack-dev-server冲突，以及什么不是。

我安装了express-react-router-views表达mongoose - 基本上我认为我可能需要启动并运行我的服务器。

有谁知道如何将我的React项目（路线）链接到快递服务器？

我使用webpack进行布局，将所有JSX并将其吐出到一个包含新index.html和bundle.js的公共文件夹中。其他所有内容（组件，路由器，sass）都存在于我的app文件夹中。到目前为止，我在我的app文件夹中创建了一个服务器文件夹（它应该在外面？）并制作了一个server.js文件。现在我完全迷失了如何将这一切联系起来。

server.js文件

import express from 'express';
import { Router, Route, Redirect, IndexRoute, Link, hashHistory } from 'react-router'; 
import ExpressReactRouter from 'express-react-router-views';
import routes from '../utils/Routes.js';


var express = require('express');

var app = express();
// Set the engine as .jsx or .js
app.engine('.jsx', ExpressReactRouter.engine({
  routes: routes
}));

// Set the view engine as jsx or js
app.set('view engine', 'jsx');

// Set the custom view
app.set('view', ExpressReactRouter.view);

app.get('/public/', function(req, res) {
  // You can replace req.url with the view path that you've set on the routes file
  res.render(req.routes);
});

webpack.config.js文件......

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

Answer 1

您可以在“react-router”中使用匹配功能，它可以帮助您在服务器端使用您的反应路由。请看一下这个项目，我认为很清楚如何使用它。

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/server.js#L84

联系表达React webpack项目

1 个答案: