prefixing alle reagieren Links innerhalb der App

Question

Ich habe mehrere Links in meinem react App, die wie folgt aussehen:

<Route path="/linkpath" component={Whatever} /> 

oder

<Link to="/linkpath">Click Me</Link> 

Gibt es eine schnelle/einfache Möglichkeit, alle Links Präfix in der ganzen App mit einer vorgegebenen Zeichenfolge? ... vielleicht über einen Router Konfigurationsparameter?

Also zum Beispiel wenn mein Präfix "/ foo" ist, würden alle Links zu "/ linkpath" in /foo/linkpath umgewandelt werden.

Hinweis: Nur um zu klären, ich bin mit react-router-dom v4.0.0-beta.5

Answer 1

Es ergibt sich die Router in react-router-dom v4.0.0-beta.5 hat einen Parameter namens basename, die dieses Szenario anspricht.

<Router basename="/foo"> 
    <Link to="/linkpath">Click Me</Link> 
    <!-- other links here --> 
</Router> 

In diesem Fall Klicken Sie auf Link Mes /foo/linkpath sein wird. Solange also Router alle Components in der App umschließt, wird allen Links das Präfix basename vorangestellt.

Eine wichtige Anmerkung: Stellen Sie sicher, dass die Zeichenfolge in basename beginnt mit einem slash; d.h., verwende "/foo" anstelle von "foo". Letzteres erzeugt unerwünschtes Verhalten beim Klicken auf Links (es hängt den vollständigen Linkpfad an die vorhandene URL an, wenn Sie auf den Link klicken, anstatt ihn zu ersetzen).

Answer 2

Mit React Router, wenn Sie Ihre Routen definiert nisten mit wie folgt aus:

<Router history={history}> 
    <Route path="/" component={App}> 
    <Route path="/hello" component={Hello} /> 
    <Route path="/whatever" component={Whatever} /> 
    </Route> 
</Router> 

Dann können Sie einfach den Pfad der äußersten Route Komponente ändern und es wird das Präfix hinzufügen. Im obigen Fall, können Sie es ändern:

<Router history={history}> 
    <Route path="/api" component={App}> 
    <Route path="/hello" component={Hello} /> 
    <Route path="/whatever" component={Whatever} /> 
    </Route> 
</Router> 

Und dann werden alle verschachtelten Routen werden anstelle der ursprünglichen /hello und /whatever bei /api/hello, /api/whatever sein.