Wie wird bei der Instanziierung der Komponente in der Routendefinition auf Parameter im Pfad verwiesen? erreichen Router v4

Question

Derzeit in meinem route.tsx habe ich die nachstehend aufgeführten:

<Route exact={true} path="/test/:id" component={Test} /> 

Die Testkomponente nimmt tatsächlich in einer Stütze namens id.

<Test id="23232"/> 

Wie würden Sie definieren die Route mit der für den Zugriff „: id“, so dass es in gegenübergeben werden können, die die param im Testkomponente zuzugreifen.

So etwas wie

<Route exact={true} path="/test/:id" component={(props)=>{ <Test id={props.match.params.id} />}} /> 

Ist das möglich?

Danke, Derek

Answer 1

Ja, das ist möglich.

Allerdings müssen Sie nur die Syntax ein wenig anpassen, um den zusätzlichen Satz von Klammern zu entfernen:

<Route exact={ true } path="/test/:id" component={ (props) => <Test id={ props.match.params.id } /> } /> 

Sie mögen vielleicht auchmachen verwenden, anstatt Komponente:

<Route exact={ true } path="/test/:id" render={ (props) => <Test id={ props.match.params.id } /> } /> 

Aus der Dokumentation:

Wenn Sie eine Komponente verwenden (anstelle von Render oder untergeordneten Elementen), verwendet der Router React.createElement, um ein neues React-Element aus der angegebenen Komponente zu erstellen. Das heißt, wenn Sie dem Komponentenattribut eine Inline-Funktion zuweisen, würden Sie bei jedem Rendern eine neue Komponente erstellen. Dies führt dazu, dass die vorhandene Komponente unmounten und die neue Komponentenmontage durchgeführt wird, anstatt nur die vorhandene Komponente zu aktualisieren. Wenn Sie eine Inline-Funktion für das Inline-Rendering verwenden, verwenden Sie den Render- oder Children-Prop (siehe unten).

https://reacttraining.com/react-router/web/api/Route/component