Question

我正在使用服务器端的Express路由器使用React路由器设置一个单页应用程序（用于使用React路由器提供第一个索引页面，然后为API请求提供支持）。目前，我只有2条路线：“ /”和“ / history”

-单击主页上的“历史记录”链接，可以使我毫无问题。

-手动输入“ / history”路由会使浏览器永远处于加载状态。

-在“ /历史”页面上重新加载页面使浏览器永远保持加载状态。

我该如何解决这个问题？

我尝试重新安排Express上的路由，此后，我尝试设置app.all（'*'）方法来处理所有请求。最后，我尝试用app.get ...更改app.all ...，但是这些都不对我有帮助。

我的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中的

router部分（用于React Router）：

    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'));

我希望总是从服务器接收相同的文件，因此React Router可以充当导航路由器。但是它将一直加载到节点控制台中：

(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)

Answer 1

在您的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)
        }
    })
});

您应该可以毫无问题地访问/ history。

Answer 2

我能够解决它，结果证明这是一个路由错误。正如我的history.routes.js处理/ history请求（代码中已弃用的一部分）一样，它从未调用过app.use（'*'....）。

绕过此特定路由使我可以服务index.js并从那里继续反应路由。只是要了解两种路由的工作方式和时间。

PS：@aquilesb的答案有助于为可能对此有疑问的任何人设置正确的路径。

无法使用react-router和express

2 个答案: