Я хочу использовать вложенные маршруты с ExpressJS и реагировать на маршрутизатор, но я сталкиваюсь с проблемами, связанными с тем, что вложенный маршрут меняет путь, что приводит к 404.
У меня есть внутренний сервер NodeJS с ExpressJS, работающим на порту5000. Сервер 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 обработать запрос и загрузить соответствующий компонент.
Если что-то неясно, пожалуйста, дайте мне знать.
Заранее спасибо.