How to pass state up to Router component?

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

95faf8e76605e973 95faf8e76605e973 · Accepted Answer · 2020-09-16T23:06:50

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}
    />
  )}
/>

How to pass state up to Router component?

1 Answers