Jak przekazać stan do komponentu routera?

Question

Jestem całkiem nowy w React i próbuję stworzyć prostą grę. Wszystkie dane są w stanie w komponencie aplikacji . Chcę przekierować stronę do komponentu Battle z kilkoma rekwizytami używając routera. Czy mogę przekazać stan z aplikacji do routera, aby router mógł przekazać go do komponentu Battle w następujący sposób:

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

Komponenty wyglądają tak: Router => App (stan) => Battle i gdzieś po onClick (zmień ścieżkę) chcę Router => Battle (z danymi ze stanu aplikacji) => powrót do aplikacji po bitwie . Czy jest na to sposób? Dziękujemy wszystkim zainteresowanym

EDIT Render Prop naprawił problem, dzięki. Router renderuje dane przekazywane przez właściwości, ale czy dobrym pomysłem jest przekazywanie danych z innego stanu komponentu do routera w następujący sposób:

<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?
      />
/>

EDYCJA 2 OK, więc próbuję umieścić Routerkomponent wewnątrz komponentu aplikacji i przekazać do niego kilka właściwości ze Appstanu. W tym Appkomponencie również zmieniam ścieżkę do /battlekorzystania z onClick. W Routerprzekazuję rekwizyty za pomocą renderowania rekwizytów, ale aplikacja zawiesiła się na dobre. Chyba coś schrzaniłem ...

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>

(...) 
)

Rozwiązanie: podążaj za tą piaskownicą, to świetnie : codeandbox.io/s/cranky-keller-hbig1?file= / src / App.js

Answer 1

Możesz użyć właściwości renderowania

<Route
  path="/game/battle"
  render={() => (
    <Battle
      monster={this.props.details}
      team={this.props.team}
      player={this.props.player}
    />
  )}
/>

---

Alternatywnie możesz nadal używać componentrekwizytu, ale spowoduje to montaż nowych elementów

<Route
  path="/game/battle"
  component={() => (
    <Battle
      monster={this.props.details}
      team={this.props.team}
      player={this.props.player}
    />
  )}
/>