Question

我想将嵌套路由与ExpressJS一起使用并对路由器进行反应，但我面临的问题是嵌套路由会更改导致404的路径。

我有一个NodeJS后端服务器，在端口5000上运行ExpressJS。Express服务器已设置为处理API请求（localhost:5000/api/something）和所有其他GET请求的静态内容。

server.js

// Serve static files from the React frontend app
app.use(express.static("dist"));

app.get('/*', function(req, res) {
  res.sendFile("index.html", { root: path.join(__dirname, '../../../dist') });
});

// Choose the port and start the server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Node server started on port: ${PORT}`);
});

app.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Start from "./pages/Start";
import Page from "./pages/Page";
import Subpage from "./pages/Subpage";


class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <Route path="/page" component={Page} />
            <Route path="/page/:subpage" component={Subpage} />
            <Route exact path="/" component={Start} />
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

此设置的问题是，当我尝试加载localhost：5000 / page / subpage时，出现以下错误：

Uncaught SyntaxError: Unexpected token <

我认为这是由于server.js将page添加到了bundle.js文件和index.html的存储路径。

我要实现的只是让app.js处理请求并加载相应的组件。

如果不清楚，请告诉我。

谢谢。

ExpressJS和react-router的嵌套路由

0 个答案: