Страницы React-роутера и Gitlab: потеря местоположения. Состояние - PullRequest
Новая
       9

Страницы React-роутера и Gitlab: потеря местоположения. Состояние

0 голосов
/ 15 января 2019

На хостинге gitlab-страниц я размещаю приложение реагировать, а для маршрутизации страниц использую historyRouter. Маршрутизация работает нормально, но когда я перезагружаюсь (нажимаю клавишу f5) или открываю маршрут напрямую, вставляя URL-адрес в адресную строку, сайт теряет свое полное состояние. Это означает, например, что я на myaccount.gitlab / mysite, и я нажимаю любую ссылку, которая перенаправляет меня на myaccount.gitlab / mysite / nextpage, используя этот метод, 

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

Я нажимаю также состояние на этой странице. До сих пор все работает нормально, но если я попытаюсь перезагрузить страницу, я получу страницу emtpy. Отладка в консоли говорит мне, что this.location.state не определено. Я успешно грязно исправил эту проблему, сказав конструктору nextpage, чтобы установить 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"));

1 Ответ

0 голосов
/ 16 января 2019

Я считаю, что это не проблема, связанная с gitlab. это имеет смысл, в первом сценарии вы переходите с главной страницы на следующую страницу, передавая аргумент myState, чтобы он был доступен для следующей страницы через реквизиты. в то время как во втором вы пришли из ниоткуда, поэтому история не знает о 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..
   
}
...