How to pass state up to Router component? - reactjs

Question

I'm pretty new to React and I'm trying to create a simple game. All the data is in state in App component. I want to redirect page to Battle component with couple of props using Router. Can I pass state from App up to the Router so Router can pass it down to Battle component like this:
<Route path="/game/battle" component={
<Battle
monster = {this.props.details} //some props living
team = {this.props.team} //in App component
player={this.props.player} //can i pass it here somehow?
}
/>
Components look like this:
Router => App(state) => Battle and somewhere after onClick(change path) i want Router => Battle(with data from App state) => return to App after battle. Is there a way to achieve it?
Thanks to everyone interested
EDIT render prop fixed the issue, thanks. Router renders data passed via props but is it a good idea to pass data from other component state to Router like this:
<App //this is where state with monster, team, player lives
(...)
<Router
monster = {this.state.details} //some props living in this App component
team = {this.state.team} //can i pass it to Router somehow
player={this.state.player} //so Router renders Battle component
//with monster, team, player data?
/>
/>
EDIT 2
Ok, so Im trying to place Router component inside App component and pass some props to it from App state. In this App component also I change path to /battle using onClick. In Router I pass props using render props but it crashed app for good. I guess I messed something up...
Router.js:
(...)
<Route path="/game/:storeId" component={App} />
<Route
path="/battle"
component={() => (
<Battle
player={this.props.player}
team={this.props.team}
monster={this.props.monster}
/>
)}/>
<Route component={NotFound} />
</Switch>
</BrowserRouter>
(...) export default Router;
App.js:
(...)
state = {
player: {},
monsters: {},
locations: {},
team: {},
battleMode: false,
communicate: "asdad",
merchants: {},
quests: {},
items: {},
};
(...) return(
<Router
monster= {this.state.monster} //some props living in this App component
team = {this.state.team} //can i pass it to Router somehow
player={this.state.player} //so Router renders Battle component
//with monster, team, player data?
/>
<button onClick={()=>{this.props.history.push(`/battle`)}}>Go →</button>
(...)
)
Solution: follow this sandbox, it's great:
codesandbox.io/s/cranky-keller-hbig1?file=/src/App.js

Answer 1

You can use the render prop
<Route
path="/game/battle"
render={() => (
<Battle
monster={this.props.details}
team={this.props.team}
player={this.props.player}
/>
)}
/>
Alternatively you can still use component prop but this will cause mounting of new components
<Route
path="/game/battle"
component={() => (
<Battle
monster={this.props.details}
team={this.props.team}
player={this.props.player}
/>
)}
/>