reactjs - React-Router:Gitlab-pages 在刷新时显示 404 错误
问题描述
我是反应和 gitlab 页面托管的新手,我目前在 gitlab-pages 上托管我的第一个应用程序。几天前,我添加了 react-router-dom 来在特定页面/路由之间导航。路由工作正常,但是当我尝试刷新 gitlab 上的任何页面期望“/”主域时,我收到 404 错误(例如,我在 /booked 路由上并按 F5,我的 gitlab 给了我 404 错误)。我的配置有什么问题吗?请看下面:
...
import { Route, BrowserRouter as Router } from "react-router-dom";
const routing = (
<Router basename={process.env.PUBLIC_URL}>
<div>
<Route exact path="/" component={Home} />
<Route path="/booking" render={props => <Child {...props} />} />
<Route
path="/booked" render={props => <ChildChild{...props} />}
/>
<Route path="/bookedd" component={ChildChildChild} />
</div>
</Router>
);
ReactDOM.render(routing, document.getElementById("root"));
这是我的 gitlab-ci.yml:
test:
image: node:9.6.1
stage: test
script:
- npm install; npm run test
pages:
image: node:9.6.1
stage: deploy
variables:
PUBLIC_URL: "/pageName"
script:
- rm package.json; mv package.json.pages package.json;
npm install;npm install react-scripts@1.1.1 -g;npm run build
- rm -rf public; mv build public
artifacts:
paths:
- public
only:
- master
如果 404 错误没有真正的解决方案,是否可以将任何刷新尝试重定向到“/”主路由?
解决方案
最简单的解决方案是使用HashRouter
而不是BrowserRouter
......它会#
在您的项目名称之后放入 URL
推荐阅读
- database - 我可以在没有rosetta的mac M1上安装mongodb吗?
- amazon-web-services - 使用esp32到aws时如何解决错误400?
- javascript - 我可以在 JavaScript 中按值获取元素吗?
- flutter - Flutter 构建错误:任务“:cloud_firestore:compileReleaseJavaWithJavac”执行失败
- css - 字体图标没有出现在顶部菜单中,我做错了什么?
- python - Web 应用程序(Flask)如何处理 socket.io 的兼容性
- css - CSS 字体导入帮助
- .net-core-3.1 - 我正在使用 VS2022 社区预览版 17.1.0。安装 .NET Core 3.1.415 SDK 后,我不再看到空白解决方案模板
- python - 我想在 Django 中同时更新多个模型字段
- java - 如何从 Java 中的数组列表中打印数组的出现次数?