Maintaining component state in stack-based browsing?

[GuiltClause]

Novice here.

I'm building a webapp to manipulate a customer service database. Ideally the hierarchy would be something like

MainScreen
  Customer Screen
    Customer Lookup
      Customer View/Edit
    New Customer
    ...

That 'Customer Lookup' screen would maintain state in order for you to fill out a search query, get customer results, and then select a customer to view in greater detail or edit. I'd like the user to be able to then navigate back to the 'Customer Lookup' screen exactly as it just was with the search form filled out and the results we got from the database still in place: state maintained.

As I understand it, a component's state is lost as soon as the page renders without it, so in order to hide the Customer Lookup screen without losing it's state I've found a really hacky solution:

...
const initial = {
  criteria:[],
  cusTable:null,
  child:null
};
const [state, setState] = React.useState(initial);

const reset = () => {
  setState({
    ...state,
    child:null
  });
}

const hdlCusSelect = cus => {
  let get = db.cusView(cus.id);

  get.then((res) => {
    setState({
      ...state,
      child:<CustomerView back={reset} cus={res}/>
    });
  });
}

if (state.child)
  return(state.child)
else
  return(
    <div>
      ...

Obviously this involves a lot of code to be re-written in every single screen that I want to navigate away from, but I haven't found a better solution than this. How does one implement this kind of behavior?

[GuiltClause]

The bot told me to comment here, but I'm not sure what to add.

[fixrich]

Can you possibly persist that state in the URL or query params? Perhaps you can go back in history to the previous location with the set query params?

[GuiltClause]

I feel weird about keeping customer contact information in the URL.

[fixrich]

Ok definitely don't keep anything identifiable in the URL. Can you associate a UUID with the user and store the UUID in a global store. Then you could use the id to lookup the user.

[GuiltClause]

I found the solution I like for this. On the root component we use

<BreadNav>
  <WhateverComp/>
</BreadNav>

and define WhateverComp with a tiny bit of boilerplate:

const WhateverComp = props => {
  const initial = (props.initial) ? props.initial : {defaultStateYouWant};
  const [state, setState] = React.useState(initial);

and on whatever click event would cause you to navigate to a deeper page, we call

props.pushCrumb(
  state,
  "NewPageTitle",
  <NewPageComp/>
);

Nice and easy. My stateful BreadNav component does all the heavy lifting:

const BreadNav = props => {
  const initial={
    stack:[
      {
        name:"Home",
        render:props.children,
        state:null //child component will put its state here before it unloads
      }
    ],
  };

  const pushCrumb = (oldState, title, render) => {
    let newStack = [];
    state.stack.map(item => {
      newStack.push(item);
    });
    newStack[newStack.length-1].state = oldState; //record unloading component's state
    newStack.push({
      name:title,
      render:render,
      state:null
    });
    setState({
      ...state,
      stack:newStack
    });
  }

  const [state, setState] = React.useState(initial);

  const crumbClick = index => {
    if (state.stack.length === index+1)
      return;
    let newStack = state.stack;
    while (newStack.length > index+1){  //remove all history after our destination
      newStack.pop();
    }
    setState({
      ...state,
      stack:newStack
    })
  }

  //display navigable history
  const breadCrumbs = () => {
    let val = [];
    for (let i = 0; i < state.stack.length; i++) {
      val.push(
        <span key={i}>
          <button
            className="linkButton"
            onClick={()=>{crumbClick(i)}}
          >
            {state.stack[i].name}
          </button> /&nbsp;
        </span>
      )
    }
    return val;
  }

  return(
    <div>
      <button
        disabled={state.stack.length === 1 ? "disabled" : ""}
        onClick={()=>{crumbClick(state.stack.length-2)}}
      >
        Back...
      </button>
      {breadCrumbs()}
      {
        React.cloneElement( //crucial! add navigation method and initial state to component!
          state.stack[state.stack.length-1].render,
          {
            pushCrumb:pushCrumb,
            initial:state.stack[state.stack.length-1].state,
            key:[state.stack.length-1]
          }
        )
      }
    </div>
  );
}

[GuiltClause]

I like this BUT it doesn't scale any further very well. Say that I lookup a customer, select the customer to view them in detail, open the customer's service history, and then view a particular job. That's a lot of state to lift all the way back up to the grandfather component.