Соедините back-end express с front-end React - PullRequest
Новая
       136

Соедините back-end express с front-end React

0 голосов
/ 12 июля 2020

как говорится в заголовке, я пытаюсь связать свой express бэкэнд с фронтенд-реакцией. Итак, я понял, что мне нужно создать маршрутизатор для рендеринга страниц и использовать серверную часть express только для данных, но когда я это делаю, он просто возвращает пустую страницу. Я, вероятно, что-то пропустил, поэтому я опишу все свои конфигурации ниже.

Я начал с моего конфигурационного файла babel: 

{
    "presets": ["@babel/preset-env","@babel/react"],
    "plugins": ["dynamic-import-webpack","@babel/plugin-transform-modules-commonjs"],
    "env": {
        "development" : {
            "compact": false
        }
    }
}

и моего пакета webpack: 

const path = require('path');
var index = {
    target: 'web',
    entry: './client/route.js',
  mode: 'development',
    output: {
    filename: 'bundle.js',
    // Output path using nodeJs path module
        path: path.resolve(__dirname, './client/views')
    },
    devServer: {
        inline: false,
        contentBase: "./public",
    },
    module: {
            rules: [
                    {
                            test: /\.(js|jsx)$/,
                            loader: 'babel-loader',
                            exclude: /node_modules/,
                            options: {
                                presets: ["@babel/preset-env",'@babel/react']  //Preset used for env setup
                            }
                    }, {
                        test: /\.css$/,
                        loader: 'style-loader!css-loader'
                    },{
                        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
                        loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '/public/javascripts/build/fonts'
            }
                    }
            ]
    }
    
}

module.exports = [
index
];

в моем сервере js файл, я перенаправляю в свой html файл, где пользователь может найти response-router-dom 

app.use('/static', express.static(path.join(__dirname, '../client')));
app.get('*', function(req, res) {
  res.sendFile('index.html', {root: path.join(__dirname, '../client/views')});
});

в моем html файле, я связал свой ответ js файл с пакетом, который я создал ранее с моим пакетом react-router-dom 

<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

  <body>
    <div id="root"></div>
    <script type="text/jsx" src="/bundle.js"></script>
  </body>
</html>

и, наконец, моим маршрутизатором. js, который входит в комплект. js

import React from 'react';
import { BrowserRouter} from 'react-router-dom';
import Home from './components/Add';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

const routing = (
  <BrowserRouter>
    <Home />
  </BrowserRouter>
)

ReactDOM.render(routing, document.getElementById('root'))

Для меня это сложно, поэтому я ценю все ответы, которые вы можете дать мне о моей проблеме.

...