Access state variables in page components (React template)

1

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?

2

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

3

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