Как сохранить состояние предыдущего компонента при переходе к следующему компоненту в SPA?

Question

У меня есть MobileNumberLogin и LoginOTPScreen.Это два отдельных экрана. Когда пользователь вводит номер мобильного телефона и нажимает кнопку «Продолжить», он перенаправляется на LoginOTPScreen.Но предположим, что пользователь нажимает кнопку «Назад» из LoginOTPScreen, он возвращается к экрану MobileNumberLogin и номер, введенный пользователем, исчезает.

Ниже приведен мой код для MobileNumberLogin

const MobileNumberLogin = ({ history }) => {
  const [mobileNumber, setMobileNumber] = useState("");

return (
       <input
          type="tel"
          maxLength="10"
          className="mobileNumberTextField"
          placeholder="Your Mobile Number"
          autoFocus={true}
          value={mobileNumber}
          onChange={event => setMobileNumber(event.target.value)}
        />.....

Код кнопки возврата LoginOTPScreen выглядит следующим образом:

`history.goBack();` is called on the button's click

, но как только я возвращаюсь к MobileNumberLogin, введенный номер исчезает со входа.

Answer 1

Но предположим, что пользователь нажимает кнопку "Назад" ...

Пользователь также может нажать кнопку "Обновить".Если вам также нужно с этим справиться, то вы можете рассмотреть этот пакет .LocalStorage небезопасен, поэтому его не следует использовать для хранения каких-либо данных, чувствительных к безопасности.

Answer 2

вы можете использовать ContextAPI, оборачивая ваши маршруты следующим образом:

const ContextA = React.createContext('light');

<ContextA.Provider value={{
 sharedData: this.state.sharedData, 
 setSharedData: this.setState({sharedData: 'sharedDta'})
}}>
  <Switch>
    <Route exact path='/route1' component={ MobileNumberLoginWrapped } />
    <Route exact path='/route1' component={ LoginOTPScreenWrapped } />
  </Switch>
</ContextA.Provider>

И затем обернуть свой MobileNumberLogin в Context Consumer

<ContextA.Consumer>
{ ({sharedData, setSharedData}) =>  <MobileNumberLogin sharedData={sharedData} setSharedData={setSharedData}/>
<ContextA.Consumer>

Прочитать официальные документы реагирования: https://reactjs.org/docs/context.html