Wildcard in React-Router 4 Basisnamen

Question

In React-Router 4 Ich Konfiguration des basename wie so:

<BrowserRouter basename="/aaaa/bbbb/*/cccc"> 

Wo * jede ganze Zahl sein kann. Das funktioniert aber nicht - ist meine Syntax falsch?

Answer 1

Sie können ein Array oder etwas schaffen, dass Sie die Verbindung und Routenelemente dynamisch erstellen können:

// create the array with the ids and the components 
const wildcards = [ 
    {id: 0, target: ComponentOne}, 
    {id: 1, target: ComponentTwo}, 
    {id: 2, target: ComponentThree} 
]; 

// now map to create the links 
{wildcards.map(e => { 
    return <Link className="btn btn-secondary" to={`/aaa/bbb/${e.id}/ccc`}>Component {e.id}</Link> 
})} 

// then the routes 
{ wildcards.map(e => { 
    return <Route path={`/aaa/bbb/${e.id}/ccc`} component={e.target} key={`component_${e.id}`}></Route> 
})} 

Hier ist eine Live-Probe dieses Ansatzes:

https://codesandbox.io/s/vyO05x2g

Auch Reagieren Der Router bietet einen Doppelpunkt im Route-Element an. Obwohl dieser Ansatz die gleiche Basiskomponente machen und dass ein sollten Sie Ihre Logik erstellen, um die spezifischen Daten für diesen bestimmten Weg zu machen:

<Route path="/aaa/bbb/:id/ccc" component={MyBaseComponent}></Route> 

// then in the base component 
const MyBaseComponent = ({match}) => { 
    // run your logic here 
    return(
    <div>Your content depending on the match params</div> 
); 
}; 

---

EDIT

Basierend auf dem Kommentar Wir waren nicht auf der gleichen Seite. Ich gehe davon aus, dass Sie je nach Code einen anderen Wert übergeben möchten. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

So::

<BrowserRouter basename=`/aaaa/bbbb/${wildcard}/cccc`> 

Das sollte passieren, was wildcard auf jeweils übertragen von der in diesem Fall können Sie Template Literale passieren eine Variable, Prop oder staatliches Eigentum an der Basis Router Komponente, die die <BrowserRouter /> darauf hat.