带有 react-router-dom 的 Vite

约翰·西马斯

我正在使用 Vite 和 react-router dom 开发一个有两个页面的 webapp,在开发模式下一切正常。但是当我构建 de 应用程序时,唯一有效的页面是索引 (path="/") 我正在使用确切的属性。

或纳卡什

它发生的原因是因为构建行为不同。当您在开发模式下运行应用程序时,这意味着您的应用程序现在正在服务器上运行(您的 PC 托管应用程序 - 一个节点 js 应用程序正在运行并且您的应用程序正在其上运行)。

构建应用程序时,会生成“构建”目录,但不再运行任何服务器。所以要么创建一个“托管”应用程序的服务器,要么不使用 react-router-dom(你可以尝试自己实现)

现在,当您使用 react-router 时,理想情况下您希望将所有请求路由到 build/index.html。因此,您可以构建一个代理服务器来为您的 index.html 和静态文件提供服务,如下所示(使用 Express.js):

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

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, 'build')));

app.use('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build/index.html'));
});

app.listen(process.env.PORT || 3000, () => console.log(`Running on PORT ${process.env.PORT || 3000}`));

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法使用带有react-router-dom的react钩子

在react-router-dom中withRouter有什么用?

react-router 4.0,react-router-dom和react-router-redux有什么区别?

React Redux和react-router-dom

混淆react-router-dom和react-router-redux

React-Router-Dom主页

React-router-dom推送

在具有私有路由的React Router Dom中使用渲染

在父容器中打开带有react-router-dom的路由

react-router-dom中带有BrowserRouter的动态基本名称

带有React Router的后端API

测试:在带有react-testing-library的react-router-dom中的Link上单击(fireEvent.click)不会触发

如何使用带有typescript的react router dom导航到新页面

react-router-dom:如何在Switch中拥有多个具有各自路径的“外壳”?

TypeError:undefined不是带有React-router-dom的对象(评估“ undefined.state”)

模拟React-Router-dom useHistory和其他带有笑话的钩子

带有react-router-dom链接的SpeedDialAction

React Router Dom的<Switch>问题

如何使用带有react-redux的react-router-dom v6.0.0渲染不同的组件

带有KOA的React Router的同构React

带有 Reactstrap 和 React Router Dom 的 Active NavLink

带有 Typescript 的 React Router 未定义“React”

react-router-dom 的问题

来自 react-router-dom 的带有自定义属性的 RouteComponentProps

`yarn add react-router-dom` 和 `yarn add @types/react-router-dom` 有什么区别?

是否有 <Navigate> 作为 react-router-dom?

带有 @emption/react 的 npm 包与 vite 未按预期工作

React Router Dom - React Router 更改 url 但不更改页面

注册表单的 onSubmit 带有来自 React-Router-Dom 的链接