前綴所有的應用程序內反應的鏈接

Question

我有我的整個react應用幾個環節是這個樣子：

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

或

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

是否有一個快速/簡單的方法來前綴的所有鏈接整個應用程序與預定的字符串？ ...也許通過Router配置參數？

因此，例如，如果我的前綴是「/ foo」，所有到「/ linkpath」的鏈接都將被轉換爲/foo/linkpath。

注：只是爲了澄清，我使用react-router-dom V4.0.0-beta.5

Answer 1

事實證明Routerreact-router-dom v4.0.0-beta.5有一個名爲basename的參數來解決這種情況。

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

在這種情況下，點擊我的鏈接將是/foo/linkpath。所以，只要Router在應用程序中包含所有Components，所有鏈接將以basename爲前綴。

一個重要的提示：確保在字符串中basename開始與斜線;即使用「/foo」而不是「foo」。後者在點擊鏈接時會產生不希望的行爲（每次單擊鏈接時都會將完整鏈接路徑附加到現有網址，而不是替換它）。

Answer 2

使用反應路由器，如果使用嵌套這樣定義你的路由：

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

然後，您可以簡單地更改最外面的路徑組件的路徑，它將添加前綴。在上述情況下，你可以將其更改爲：

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

然後所有嵌套的路線將在/api/hello，/api/whatever代替了原來的/hello和/whatever。