webentwicklung-frage-antwort-db.com.de

Wie bekomme ich Parameter in der Komponente rea rea ​​router dom v4?

Ich habe diesen Code:

<BrowserRouter>
   <Route  path="/(:filter)?" component={App} />
</BrowserRouter>

der Filterparameter oder '' im Stammverzeichnis ist vermutlich auf den Requisiten der App-Komponenten auf den vorherigen Reaktorrouterversionen enthalten.

Dies ist mein Code in meiner App:

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

Ich habe this.props.match.params auf der Konsole angemeldet, aber es gibt keine. Hilfe?

javascriptreactjsreact-routerreact-router-v4react-router-dom
5
i am gpbaculio

Ich gehe davon aus, dass Sie das Redux-Tutorial auf Egghead.io befolgen, da Ihr Beispielcode das zu verwenden scheint, was in dieser Videoserie definiert ist. Ich war auch bei diesem Teil steckengeblieben, als ich versuchte, React Router v4 zu integrieren, fand aber schließlich eine funktionierende Lösung, die nicht weit von dem entfernt ist, was Sie versucht haben.

⚠️ HINWEIS: Eine Sache, die ich hier überprüfen würde, ist, dass Sie die .__ verwenden. Aktuelle Version von react-router-dom (4.1.1 zum Zeitpunkt dieses Schreibens). Ich hatte einige Probleme mit optionalen Filtern in den Parametern auf einige der Alpha- und Betaversionen von v4.

Erstens sind einige der Antworten hier falsch und Sie verwenden can optionale Parameter in React Router v4, ohne dass reguläre Ausdrücke, mehrere Pfade, archaische Syntax oder die Komponente <Switch> erforderlich sind.

<BrowserRouter>
  <Route  path="/:filter?" component={App} />
</BrowserRouter>

Zweitens, wie andere bereits bemerkt haben, macht React Router v4 params nicht mehr auf Routen-Handler-Komponenten verfügbar, sondern gibt stattdessen eine match-Eigenschaft an, die verwendet werden soll.

const App = ({ match }) => {
    return (
      <div>
        <AddTodo />
        <VisibleTodoList filter={match.params.filter || 'all'} />
        <Footer />
      </div>
    )
}

Von hier aus gibt es zwei Möglichkeiten, um den Inhalt mit der aktuellen Route zu synchronisieren: Mit mapStateToProps oder mit HoC withRouter werden beide Lösungen bereits in der Egghead-Serie besprochen, sodass ich sie hier nicht noch einmal rekapitulieren möchte.

Wenn Sie immer noch Probleme haben, sollten Sie mein Repository der vollständigen Bewerbung aus dieser Serie überprüfen.

Beide scheinen gut zu funktionieren (ich habe beide gerade getestet).

13
indiesquidge

React Router v4 akzeptiert keine regulären Ausdrücke für den Pfad. In der Dokumentation finden Sie keine regulären Ausdrücke. Anstelle eines regulären Ausdrucks können Sie auch mehrere Routen in der Komponente <Switch> Erstellen, und die erste, die übereinstimmt, wird gerendert:

<BrowserRouter>
  <Switch>
    <Route  path="/" component={App} />
    <Route  path="/:filter" component={App} />
  </Switch>
</BrowserRouter>

Sie haben auch einen Fehler in Ihrer App-Komponente. Sie erhalten die params über die match -Eigenschaft, nicht über die params -Eigenschaft (nicht getestet, dies sollte jedoch näher an dem liegen, was Sie möchten):

const App = ({match}) => {
    return ( 
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={match.params.filter || 'all'} 
        />
        <Footer />
      </div>
    );
}

All dies wird in den React Router V4-Dokumenten zu mehrdeutigen Übereinstimmungen behandelt

6
Todd Chaffee

In der react-router-Dokumentation sind props.match.params Ihre Parameter gespeichert.

Versuchen Sie dies, um auf den Filternamen zuzugreifen

const App = ({match}) => {
    ...
    <VisibleTodoList 
        filter={match.params.filter || 'all'}
    />
    ...
}
1
glhrmv

Ich weiß nicht, warum der Reaktionsrouter meinen Filter nicht erkennen kann, obwohl er ordnungsgemäß funktioniert. Ich habe dieses Problem mithilfe von location.pathname behoben, da er die Arbeit für mich erledigt. Ich denke, dass reakter Router meinen Filterparameter wegen regexp nicht finden kann, ich habe damit gerechnet, dass ich || um alles auf root zu verwenden, aber leider für mich kann ich es nicht erkennen, also habe ich location.pathname verwendet. Ich würde mich über Anregungen freuen, da ich mit meiner Pfadkonfiguration auf regexp nicht sicher bin.

0
i am gpbaculio