How to pass state between routes?

Question

JavaScript

I welcome everyone!
I continue to study the mechanisms of this wonderful library. And then the question arose, subject. For example, we have such a router of two pages:

class Content extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/sqlshell" component={Contacts} />
      </Switch>
    )
  }
}

And then we go to the Home page, fill the state with some data, and after that, when I go to the Contacts page, I need the state to be transferred to this component as well. Let me suggest that you need to initialize the state in the constructor of the Content component so that it is visible to both children of the Home and Contacts components, something like this:

class Content extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      data1: null,
      data2: null,
    }
  }

  render() {
    return (
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/sqlshell" component={Contacts} />
      </Switch>
    )
  }
}

But then how to extract this state from page to page? Or can pass the state as props attributes to each component?

Answer 1

store