Использование express для маршрутизации внешнего вызова для приложения Reactjs - PullRequest
Новая
       33

Использование express для маршрутизации внешнего вызова для приложения Reactjs

0 голосов
/ 19 апреля 2020

В настоящее время у меня установлено приложение reactjs на heroku, которое использует express для обслуживания моих страниц c страниц:

https://powerful-tundra-95895.herokuapp.com/

Все представления отлично маршрутизируются, за исключением того, что я хочу перенаправить вызов / reviews (Отзывы клиентов) в другое приложение (весенняя загрузка), которое развернуто на heroku: http://floating-sands-41561.herokuapp.com/. Как мне этого добиться? Я довольно новичок, чтобы реагировать / express, поэтому некоторые рекомендации будут с благодарностью.

Спасибо!

ReviewList. js

import React, { Component } from 'react';
import { Button, ButtonGroup, Container, Table } from 'reactstrap';
import AppNavbar from './AppNavbar';
import { Link } from 'react-router-dom';

class ReviewList extends Component {

  constructor(props) {
    super(props);
    this.state = {reviews: [], isLoading: true};

  }

  componentDidMount() {
    this.setState({isLoading: true});

    fetch('https://floating-sands-41561.herokuapp.com/api/reviews')
      .then(response => response.json())
      .then(data => this.setState({reviews: data, isLoading: false}));
  }

  render() {

    const {reviews, isLoading} = this.state;
    console.log(reviews);
    if (isLoading) {
      return <p>Loading...</p>;
    }

    const reviewList = reviews.map(review => {
      return <tr key={review.id}>
        <td style={{whiteSpace: 'nowrap'}}>{review.itemName}</td>
        <td style={{whiteSpace: 'nowrap'}}>{review.reviewDesc}</td>
        <td style={{whiteSpace: 'nowrap'}}>{review.created}</td>

      </tr>
    });

    return (
      <div>
        <AppNavbar/>
        <Container fluid>
          <div className="float-right">
            <Button color="success" tag={Link} to="/reviews/new">Add Review</Button>
          </div>
          <h3>Tell us how we are doing!</h3>
          <Table className="mt-4">
            <thead>
            <tr>
              <th width="20%">Item Name</th>
              <th width="20%">Review</th>
              <th>Created on</th>
            </tr>
            </thead>
            <tbody>
            {reviewList}
            </tbody>
          </Table>
        </Container>
      </div>
    );
  }
}

export default ReviewList;

server. js: 

const express = require('express');
const axios = require("axios");
const path = require('path');
const port = process.env.PORT || 5000;
const app = express();
app.listen(port);

app.use(express.static(path.join(__dirname, '/build/')));
app.get(['/', '/about', '/policy', '/faq', '/Bestselling', '/seasonaldrinks', '/thankyou','/seasonal','/contact'], (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));

}


);

app.get('/reviews', (req, res) => {
    axios.get('https://floating-sands-41561.herokuapp.com/api/reviews').then(response => {
        res.send(response.data);
    }).catch(err => console.log(err))
});

package. json: 

{
    "name": "app",
    "version": "0.1.0",
    "private": true,
    "engines": {
        "node": "12.x"
    },
    "dependencies": {
        "axios": "^0.19.2",
        "bootstrap": "^4.4.1",
        "concurrently": "^5.1.0",
        "mdbootstrap": "^4.12.0",
        "mdbreact": "^4.25.5",
        "mysql": "^2.18.1",
        "react": "^16.9.0",
        "react-bootstrap": "^1.0.0",
        "react-cookie": "3.0.4",
        "react-dom": "^16.9.0",
        "react-router-dom": "4.3.1",
        "react-scripts": "^3.4.0",
        "reactstrap": "6.5.0"
    },
    "main": "server.js",
    "scripts": {
        "frontend": "react-scripts start",
        "mailmon": "npm run server --prefix ./src/Contact",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "start": "node server.js"
    },
    "proxy": "http://localhost:5000/",
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

Как это должно сделать: enter image description here

1 Ответ

0 голосов
/ 19 апреля 2020

Вам необходимо прокси-запрос к службе весенней загрузки. Вы можете использовать что-то вроде axios или node-fetch, чтобы отправить запрос, получить ответ и отправить его обратно клиенту.

Примерно так: 

const express = require('axios');

app.get('/reviews', (req, res) => {
    axios.get('http://floating-sands-41561.herokuapp.com/').then(response => {
        res.send(response.data);
    }).catch(err => console.log(err))
}
...