Question

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

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

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

有什么办法可以解决此问题？这只是一个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，以便可通过props供nextPage使用。而在第二个版本中，您来自无处，因此历史记录不了解myState。

一种解决方案是仅使用lolacstorag

main.js

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

nextPage组件

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丢失

1 个答案: