1

Im hosting a react-app on gitlab pages and i use react-router for routing between pages using historyRouter. The routing works fine, but when i reload (hit f5) or open a route directly by pasting the url into my adressbar, the site loses their whole state. It means, e.g im at myaccount.gitlab/mysite and i hit any link which redirects me to myaccount.gitlab/mysite/nextpage using this method,

 this.props.history.push("/nextpage", {
      mystate: this.state.mystate
    })

i push also the state mystate to this page. Everything works fine until now, but if i try to reload the page i get an emtpy page. Debugging in console tells me that this.location.state is undefined. I successfully dirty fixed this issue by telling the constructor of nextpage, to set this.location.state to any default value if it is undefined or null. Now i can reload the page successfully but any state is gone.

Is there anything to fix this behaviour? Is this only a gitlab issue? I can run my app locally in development and in production mode at localhost and there are no problems losing any state or something else. Followed some additional code i used:

Gitlab-cli.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: "/mypage"
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

index.js:

import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
const routing = (
 <Router basename={process.env.PUBLIC_URL}>
  <div>
    <Switch>
     <Route exact path="/" component={main} />
     <Route path="/nextpage" component={nextPage} />} />
     <Route component={PageNotFound} />
    </Switch>
  </div>
 </Router>
);

ReactDOM.render(routing, document.getElementById("root"));
Alex
  • 132
  • 1
  • 4
  • 21
  • hmm maybe use localstorage as an option? – azium Jan 15 '19 at 20:49
  • can you explain this a little further or give an example? Im really new to all the webdevelopment. Its just for a university project – Alex Jan 15 '19 at 21:06
  • localStorage is built into browsers, it allows users to store information about a site that persists across page refreshses. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage https://www.robinwieruch.de/local-storage-react/ think of it like a client side cache. history state can achieve the same thing but in my experiences and apparently in yours, it can be brittle or contains some edge cases. localStorage works like a charm, you can use a library like dexie to abstract its usage (localstorage / indexeddb) https://dexie.org/ – azium Jan 15 '19 at 23:28
  • 1
    you have my greatest thanks! It works :) – Alex Jan 15 '19 at 23:59

1 Answers1

1

I believe that it's not gitlab related issue. it makes sense, in the first scenario you are going from main page to nextPage passing an argument myState so it is available to the nextPage through props. while in the second one you are coming from nowhere, so the history is not aware of myState.

one solution is to simply use lolacstorag

main.js 

// instead of:
/*this.props.history.push("/nextpage", {
  mystate: this.state.mystate
 })
 */
 
 // do:
 localStorage.setItem('myState', JSON.stringify(this.state.myState));

nextPage component

export default class nextPage extends React.Component{
  //...
  componentDidMount(){
    // grap it from localStorage:
    let myState = JSON.parse(localStorage.getItem('myState'));
    // do whatever you want with it,
    // it will be available unless you unset it
   }
   /... rest of your code..
   
}
Hamza Boukhtam
  • 91
  • 1
  • 6