在 Nodejs 中托管多个网页答案

【问题标题】：Hosting Multiple Web Pages in Nodejs在 Nodejs 中托管多个网页
【发布时间】：2020-10-25 13:32:32
【问题描述】：

我已经使用 reactjs 创建了我的应用程序的前端。它包含三个组件 Home、Signin 和 Signup。在使用npm run build 构建前端之后，我使用 nodejs 创建了后端。在后端我使用了app.use(express.statis(path_to_build_directory_in_reactjs))。当我转到http://127.0.0.1:9000/ 时，它会显示主页。但是当我转到http://127.0.0.1:9000/signin 页面时，它显示can not get /signin。在构建 reactjs 之前，它显示的是登录页面，但添加后端后，它只显示主页。

Nodejs

onst express = require('express');
const bodyParser = require('body-parser');
const path = require('path');


const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, '../frontend/build')))
app.use(express.json());




app.post('/timeline',(req,res)=>
{
    console.log(req.body);
    res.end();
})





app.listen(9000,()=>
{
    console.log(9000);
})

Reactjs

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import Home from './pages/Home.js';
import Signin from './pages/Signin.js';
import Signup from './pages/Signup.js';
import Help from './pages/Help';
import Timeline from './pages/Timeline.js';



function App() {
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route exact path="/signin">
            <Signin />
          </Route>
          <Route exact path="/signup">
            <Signup />
          </Route>
          <Route exact path="/help">
            <Help />
          </Route>
          <Route exact path="/timeline">
            <Timeline />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

【问题讨论】：

尝试添加`app.all("*", (req, res) => { return handle(req, res); });`
@Sodhisaab 它说handle() 未定义。

标签： javascript node.js reactjs frontend backend

【解决方案1】：

React 开发服务器默认支持多个路由。浏览器可以请求/signin，React 开发服务器将在该 URL 处提供 react 应用程序。

您正在生成的静态构建站点only有一个index.html，因此仅支持一个路由作为应用程序的入口点。

如果你向 Express 请求 /signin，那么它将 404，因为没有这样的目录。

要让它工作的快速而肮脏的技巧是创建一个路由，它为客户端 React 代码中的每个路由提供 index.html（你可能会得到在所有其他路由之后使用 * 路由，尽管这会破坏所有 404 错误）

这取决于客户端渲染来调整视图以匹配路线。

更好的 方法是通过Next.js 等工具使用服务器端呈现，该工具将在移交之前为服务器上 的视图生成适当的 HTML如果客户端支持，则用于后续请求的客户端呈现。

如果你只处理静态内容（因为你有一个/signin 路由，你可能不是）那么你可以看看像Gatsby 这样的工具，它会生成静态页面每条路线。

【讨论】：