Я размещаю приложение response на страницах gitlab, и я использую response-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 установить this.location.state на любое значение по умолчанию, если оно не определено или равно null. Теперь я могу успешно перезагрузить страницу, но состояние пропало.
Есть ли что-нибудь, чтобы исправить такое поведение? Это проблема только с gitlab? Я могу запускать свое приложение локально в режиме разработки и в производственном режиме на localhost, и нет проблем с потерей состояния или чего-то еще. Последовал некоторый дополнительный код, который я использовал:
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 [email protected] -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"));
🤔 А знаете ли вы, что...
С React можно создавать одностраничные приложения (SPA), не перезагружая страницу.
Я считаю, что это не проблема, связанная с 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));компонент 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..
}