Access state variables in page components (React template)

I’m using the F7 React Template. In the /pages folder there are pages like about, home, etc. In React apps I’ve created before, these components would be passed down props from a parent component. But since I’m using the F7 router, these components aren’t included in the jsx that is rendered. How can I do something like

<Home username={this.state.username} />

, in order to access the username that is a state variable from app.jsx?

You need to use some state management like Redux or Flux or anything else you comfortable with. You can also pass props to page with routeProps link prop, e.g.:

<Link routeProps={{username: this.state.username}}>...

It will pass username as a prop to that page/component

Could React’s context API also be used? I’m sort of new to React, sorry if this is a stupid question.