前缀所有的应用程序内反应的链接

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。