Component angeschlossen nicht korrekte Übereinstimmung Eigenschaften Empfang withRouter

Question

ich einige Probleme, die richtige Abstimmung Eigenschaften bekommen in meiner Komponente withRouter

Mein Router Karte sieht in

<BrowserRouter> 
    <div> 
    <Switch> 
     <Route path="/" component={HomePage} /> 
     <Route path="/start/:short_code/*" render={() => <div>Magic</div>} /> 
     <Route path="/events" component={EventsPage} exact/> 
     <Route path="/events/:auction_code" /> 
     <Route component={NotFoundPage} /> 
    </Switch> 
    <MainMenu /> 
    <LoginPage /> 
    <HoldersDrawer /> 
    </div> 
</BrowserRouter> 

verbunden zu zeigen, meine HomePage Komponente ich habe es eingewickelt sowohl in withRouter und redux

export default withRouter(connect(mapStateToProps)(HomePage));

jedoch überall versuche ich this.props.match ich nur

{ 
    isExact:false, 
    params:{}, 
    path:"/", 
    url:"/" 
} 

sehen Selbst bin zugreifen, wenn ich meine URL zu einer der Routen festgelegt habe ich

Die Homepage hat einen QR-Scanner auf sie skizziert haben und ich möchte das aktiv, egal auf welcher Route der Benutzer ist, aber ich möchte auch in der Lage sein, auf die aktuelle Route der Benutzer ist auf der HomePage Zum Beispiel kann der Benutzer zu events/auction_code navigieren und wenn sie ausführen und Aktion Ich muss in der Lage sein, den relevanten auction_code an den API-Aufruf zu übergeben, den die Aktion aufruft, derzeit muss ich das analysieren der aktuellen Pfadnamensdaten. Es wäre schön, wenn ich es nur vom Objekt match.params bekommen könnte.

Kann jemand etwas sehen, das ich hier falsch mache, das dieses Problem verursachen würde?

Answer 1

Der Grund, dass withRouter Ihnen nicht bieten die Spiel Requisiten des angepassten Strecke ist, weil withRouter Sie Zugriff auf die history Eigenschaften des Objekts gibt und die nächste <Route>'s match und in Ihrem Fall die HomePage keine am nächsten abgestimmt Strecke hat.

Sie können erreichen, was Sie benötigen, indem Sie den Handler an die Komponente Routed übergeben und die Aktion an die Komponente anhebt, die die Route rendert. So etwas wie

<BrowserRouter> 
    <App/> 
</BrowserRouter> 

ist und App-Handler haben wie

class App extends React.Component { 
    handlerFunction = (match) => { 
     //your action based on match here 
    } 

    render() { 
     return (
     <div> 
      <Switch> 
       <Route path="/" component={HomePage} /> 
       <Route path="/start/:short_code/*" render={() => <div>Magic</div>} /> 
       <Route path="/events" render={(props) => <EventsPage handler={this.handlerFunction} {...props}/>} exact/> 
       <Route path="/events/:auction_code" /> 
       <Route component={NotFoundPage} /> 
      </Switch> 
      <MainMenu /> 
      <LoginPage /> 
      <HoldersDrawer /> 
     </div> 
     ) 
    } 
}