React-router 和 Gitlab 页面：丢失 location.state

Question

我在 gitlab 页面上托管了一个反应应用程序，我使用反应路由器在使用 historyRouter 的页面之间进行路由。路由工作正常，但是当我重新加载（按 f5）或通过将 url 粘贴到我的地址栏中直接打开路由时，站点会失去其整个状态。这意味着，例如我在 myaccount.gitlab/mysite 并且我点击任何 link 将我重定向到 myaccount.gitlab/mysite/nextpage 使用此方法，

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

我还将状态 mystate 推送到此页面。到目前为止一切正常，但如果我尝试重新加载页面，我会得到一个空页面。在控制台中调试告诉我 this.location.state 未定义。我通过告诉 nextpage 的构造函数成功地修复了这个问题，将 this.location.state 设置为任何默认值（如果它未定义或为 null）。现在我可以成功重新加载页面，但任何状态都消失了。

有什么办法可以解决这个问题吗？这只是一个gitlab问题吗？我可以运行我的应用程序在本地开发和生产模式下在本地主机上运行，并且没有丢失任何状态或其他东西的问题。遵循我使用的一些附加代码：

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"));

Answer 1

我相信这不是 gitlab 相关的问题。这是有道理的，在第一个场景中，你从主页到 nextPage 传递一个参数 myState 以便 nextPage 通过 props 可用。而在第二个中你不知从何而来，所以历史不知道 myState。

一种解决方案是简单地使用 lolacstorag

main.js

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

下一页组件

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..
   
}

React-router 和 Gitlab 页面：丢失 location.state

React-router and Gitlab pages: Loss of location.state

reactjs

react-router

gitlab-pages