为应用程序中的所有 React 链接添加前缀

Question

我的 react 应用程序中有多个链接，如下所示：

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

或

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

是否有一种 quick/easy 方法可以为整个应用程序中的所有链接添加预先确定的字符串前缀？ ...也许通过 Router 配置参数？

例如，如果我的前缀是“/foo”，所有指向“/linkpath”的链接都将转换为 /foo/linkpath。

注意：澄清一下，我使用的是 react-router-dom v4.0.0-beta.5

Answer 1

使用 React Router，如果您使用这样的嵌套定义路由：

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

然后你可以简单地改变最外层Route组件的路径，它会添加前缀。在上述情况下，您可以将其更改为：

<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。

Answer 2

事实证明 react-router-dom v4.0.0-beta.5 中的 Router 有一个名为 basename 的参数可以解决这种情况。

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

在这种情况下，Click Me 的 link 将是 /foo/linkpath。因此，只要 Router 将所有 Components 包裹在应用程序中，所有 link 都会以 basename.

为前缀

重要说明：确保basename中的字符串以斜杠开头；即，使用“/foo”而不是“foo”。后者在单击 link 时会产生不良行为（每次单击 link 时，它都会将完整的 link 路径附加到现有的 URL，而不是替换它）。

为应用程序中的所有 React 链接添加前缀

Prefixing all react links within the app

reactjs

react-router-redux