Question

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

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

或

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

是否有快速/简单的方法为整个应用程序中的所有链接添加预定字符串？ ......也许是通过Router配置参数？

例如，如果我的前缀是＆＃34; / foo＆＃34;，所有链接到＆＃34; / linkpath＆＃34;将被转换为/foo/linkpath。

注意：只是为了澄清，我使用react-router-dom v4.0.0-beta.5

Answer 1

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

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

在这种情况下，Click Me的链接将为/foo/linkpath。因此，只要Router在应用中包含所有Components，所有链接都将以basename为前缀。

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

Answer 2

使用 React Router ，如果您使用嵌套定义路线，请执行以下操作：

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

在应用程序中添加所有反应链接的前缀

2 个答案: