Стираются данные при переходе на вторую страницу

import React from 'react'
import {Display} from './Display'
import  {History}  from './History'
import { Keypad } from './Keypad'
import { CalculatorL } from '@/layouts'


export class ErrorBoundary extends React.Component{
  constructor(props){
    super(props)
    this.state={
      hasError: false,
      error:'',
      errorInfo: '',
    }
  }

  static getDerivedStateFromError() {
  
    return {
       hasError: true,
       }
  }

  componentDidCatch(error, errorInfo){
    this.setState({
      error: error,
      errorInfo: errorInfo,
    })
  }

  render(){
    if(this.state.hasError){
      return <h1>You have some problems: {this.state.error}, more info: {this.state.errorInfo}</h1>
    }
    return this.props.children
  }

}

function add(x,y){
  return Math.round((x + y) * 1000)/1000
}
function sub(x,y){
  return Math.round((x - y) * 1000)/1000
}
function mul(x,y){
  return Math.round((x * y) * 1000)/1000
}
function div(x,y){
  return Math.round((x / y) * 1000)/1000
}
function rem(x,y){
  return Math.round((x % y) * 1000)/1000
}
function revRem(x,y, value){
  return Math.round((value * 1000)/1000)
}



const Command = function (execute, undo, value) {
  this.execute = execute
  this.undo = undo
  this.value = value
}
const AddCommand = function (value) {
  return new Command(add, sub, value)
}

const SubCommand = function (value) {
  return new Command(sub, add, value)
}

const MulCommand = function (value) {
  return new Command(mul, div, value)
}

const DivCommand = function (value) {
  return new Command(div, mul, value)
}

const RemCommand = function(value){
  return new Command(rem, revRem, value)
}

const CalculatorF = function () {
  let current = 0
  let commands = []
  return {
    execute: function (command) {
      current = command.execute(current, command.value)
      commands.push(command)
    },
    undo: function () {
      const command = commands.pop()
      current = command.undo(current, command.value)
    },
    getPrevValue: function () {
      const temp = commands.slice()
      const command = temp.pop()
      return command.undo(current, command.value)
    },
    getCurrentValue: function () {
      return current
    },
    setFirstInputValue: function (val) {
      current = val
    },
    reset: function (){
      current = 0
      commands = []
    },
  }
}

export class Calculator extends React.Component{
  constructor(props) {
    super(props)
    this.firstInputValue = 0
    this.inputFlag = 0
    this.state = {
      inputValue: '',
      currentOperation: '',
      history: [],
      operationInputValue: '',
    }
  }

  handleClick = text =>{
    if (this.inputFlag === 1) {
      this.inputFlag = 0
      this.setState({
        inputValue: '',
      })
    }
    this.setState(prevState => {
      return{
        inputValue: prevState.inputValue + text,
      }
    })
  }

  handleSimpleOperationsButton = operation => {
    switch (operation){
      case "CE": {
        this.setState({
          inputValue: '',
        })
        break
      }
      case "C": {
        this.calculator.reset()
        this.firstInputValue = 0
        this.setState({
          inputValue: '',
        })
        break
      }
      case "=": {
        this.handleOperationsButton(this.state.currentOperation)
        break
      }
    }
    
}

handleOperationsButton = operation => {
  if ( this.state.inputValue !== '') {
    if (this.firstInputValue === 0) {
      this.firstInputValue = this.state.inputValue
      this.calculator.setFirstInputValue(+this.firstInputValue)
    } else {
      switch (this.state.currentOperation) {
        case "+": {
          this.calculator.execute(new AddCommand(+this.state.inputValue))
          break
        }
        case "-": {
          this.calculator.execute(new SubCommand(+this.state.inputValue))
          break
        }
        case "*": {
          this.calculator.execute(new MulCommand(+this.state.inputValue))
          break
        }
        case "/": {
          this.calculator.execute(new DivCommand(+this.state.inputValue))
          break
        }
      }
      this.setState(prevState => {
        return {
          history: prevState.history.concat(`${this.calculator.getPrevValue()} ${this.state.currentOperation} ${this.state.inputValue}  \n`),
          inputValue: this.calculator.getCurrentValue(),
          
        }
      })
      this.inputFlag = 1
      
    }

    if (this.inputFlag === 0) {
      this.inputFlag = 1
      this.setState({
        inputValue: '',
      })
    }
    this.setState({
      currentOperation: operation,
    })
  }
}


render() {
  return (
    <CalculatorL>
      <ErrorBoundary>
        <Display inputValue={this.state.inputValue}/>
        <History history={this.state.history}/>
        <Keypad handleSimpleOperationsButton={this.handleSimpleOperationsButton} handleOperationsButton={this.handleOperationsButton} handleNumbersButtons={this.handleClick}/>
      </ErrorBoundary>
    </CalculatorL>
  )
}

componentDidMount() {
  this.calculator = new CalculatorF()
}

}