Im new to react and gitlab pages hosting and im currently hosting my first app on gitlab-pages. Few days ago i added react-router-dom to navigate between specific pages/routes. The routing works fine, but when i try to refresh any page on gitlab expect the "/" home domain, i get a 404 error (e.g. im on the /booked route and press F5 my gitlab gives me the 404 error). Is there anything wrong with my configuration? See it below:
...
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"));
and here is my 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 [email protected] -g;npm run build
- rm -rf public; mv build public
artifacts:
paths:
- public
only:
- master
If there is no real solution for the 404 error, is it possible to redirect any refresh attempt to the "/" home route?
