Невозможно перезагрузить или вручную ввести маршрут страницы с реакции-маршрутизатором и экспресс - PullRequest
Новая
       18

Невозможно перезагрузить или вручную ввести маршрут страницы с реакции-маршрутизатором и экспресс

0 голосов
/ 22 января 2019

Я настраиваю одностраничное приложение с маршрутизатором React, используя маршрутизатор Express на стороне сервера (для обслуживания первой страницы индекса с помощью маршрутизатора реагирования и затем ожидания запросов API). В настоящее время у меня есть только 2 маршрута: '/' и '/ history'

- щелкнув ссылку "история" с домашней страницы, я попаду туда без проблем.

- Ручной ввод маршрута "/ history" заставляет браузер оставаться на загрузке навсегда.

-Перезагрузка страницы в «/ history» заставляет браузер постоянно загружаться.

как мне решить эту проблему?

Я попытался переставить маршруты на экспрессе, после этого я попытался установить метод app.all ('*') для обработки всех запросов. Наконец я попытался изменить app.all с app.get ..., но ни один из них не помог мне.

my index.js (для экспресс-маршрутизатора): 

    /*Express Server*/
    const express = require('express');
    const app = express();
    const morgan = require('morgan');
    const path = require('path');
    const bodyParser = require('body-parser');

    const { mongoose } = require('./database');

    //settings
    app.set('port', process.env.PORT || 3000);

    //middleware
    app.use(morgan('dev'));
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());

    //routes
    app.use('/api/month',require('./routes/monthly.routes'));

    app.use('/history',require('./routes/history.routes'));

    //static files
    app.use(express.static(path.join(__dirname, 'public')))

    app.get(async (req,res)=>{
        await res.sendFile(path.join(__dirname, '/public/index'), (err)=> {
        if (err) {
          res.status(500).send(err)
        }
    })
    });

    //Start server
    app.listen(app.get('port'), ()=>{
        console.log(`Server listening on ${app.get('port')}`);
    });

часть маршрутизатора моего app.js (для реагирующего маршрутизатора): 

    import React, { Component } from 'react';
    import ReactDom from 'react-dom';
    import { BrowserRouter, Route, Switch } from 'react-router-dom';
    import Axios from 'axios';

    import Home from './Home'
    import Latest from './Latest'

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
                RecentExpenses: [],
                monthState: null,
                Total: 0,
                Today: null
            }
        };

        render() {
            return (
                    <BrowserRouter>
                        <Switch>
                            <Route exact path='/' render={(props) => <Home {...props} Today={this.state.Today} Total={this.state.Total} RecentExpenses={this.state.RecentExpenses} />}  />
                            <Route exact path='/history' render={(props) => <Latest {...props} Recent={this.state.RecentExpenses} month={this.state.monthState} />} />
                        </Switch>
                    </BrowserRouter>
            )
        }
    }

    ReactDom.render(<App/>, document.getElementById('app'));

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

(node:8756) UnhandledPromiseRejectionWarning: Error: Cannot find module 'html'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
at Function.Module._load (internal/modules/cjs/loader.js:497:25)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Мне удалось это исправить, оказалось, что это была ошибка маршрутизации. так как мой history.routes.js обрабатывал запросы / history (с устаревшей частью моего кода), и он никогда не вызывал app.use ('*' ....).

Обход этого конкретного маршрута позволил мне обслужить index.js и продолжить оттуда маршрутизацию реакции. это вопрос понимания того, как и когда работают оба маршрута.

PS: ответ @aquilesb помог с установкой правильного пути для всех, у кого могут быть проблемы с этим.

0 голосов
/ 22 января 2019

В вашем index.js вы можете заменить это: 

app.use(express.static(path.join(__dirname, 'public')))

app.get(async (req,res)=>{
    await res.sendFile(path.join(__dirname, '/public/index'), (err)=> {
    if (err) {
      res.status(500).send(err)
    }
  })
});

Для этого: 

app.use(express.static(`${process.cwd()}/public/`))

app.get('*', async (req, res) => {
    await res.sendFile(`${process.cwd()}/public/index.html`, (err) => {
        if (err) {
            res.status(500).send(err)
        }
    })
});

Вы должны иметь доступ к истории без каких-либо проблем.

...