Nodejs 多个包含 react,react-router 的单页,express 如何将它们重定向?

发布于 1周前 作者 yibo5220 来自 nodejs/Nestjs

Nodejs 多个包含 react,react-router 的单页,express 如何将它们重定向?
比方说:index.html 下有一个 react-router 路径为’/user’
而 sys.html 中有一个 react router 路径为’/sys’

请问 express 如何从 index.html 重定向到 sys.html?

Harmonyos Next教程
7 回复

没懂，你 express 里从 /usr 重定向到 /sys ，然后浏览器加载后，不就由前端接管了吗


两个单页里都有前端路由的话好像就不行了

所有路由让前端来接管。

看来只能这样了

如果其他页面都不说 react 单页那也要让前端接管吗?

https://www.v2ex.com/user#/index
https://www.v2ex.com/sys#/index
#前边的由后端路由，#后边的由后端路由
problem solved~

在Node.js中使用Express来重定向多个包含React和React-Router的单页应用（SPA），你可以通过以下步骤实现。首先，确保你已经安装了必要的依赖：

npm install express react react-dom react-router-dom

接下来，创建一个基本的Express服务器，并配置路由以处理SPA的重定向。通常，对于SPA，你希望所有的前端路由都回退到同一个HTML文件（通常是index.html），这样React-Router可以接管路由管理。

以下是一个简单的Express服务器示例：

const express = require('express');
const path = require('path');
const app = express();

// Serve static files from the React build directory
app.use(express.static(path.join(__dirname, 'build')));

// All remaining routes should redirect to the index.html file
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

在这个示例中，我们首先使用express.static中间件来服务静态文件（这些文件通常由React的构建过程生成，并放在build目录中）。然后，我们使用一个通配符路由（app.get('*', ...)）来捕获所有其他请求，并将它们重定向到index.html。

这样，无论用户请求什么URL，只要它符合你的SPA的路由模式，React-Router都会接管并显示相应的页面。

回到顶部