reactjs - 是否可以不必将上下文根硬编码到用户react-router

由于Web应用程序上下文根的概念通常被视为部署问题，而不是开发问题，因此，我想知道在使用React Router进行网页导航时是否可以不对源代码中的上下文根进行硬编码。

我想做的就是使用部署描述符指定的任何上下文根来部署我的Web应用程序，例如web.xml，无需更改任何我的React源代码。

以下是保罗的回答。

首先，非常感谢保罗。我完全同意可以在这方面使用“basename”属性。而且，我们可以使用构建脚本用不同的值替换“baseName”，这些值将与部署描述符指定的最终上下文根匹配。

但是，我认为这样做只会掩盖事实，而不会改变上下文根必须嵌入源代码中的事实，从概念上讲，这应该是部署方面的问题。

我非常想知道为什么React Router选择不解析相对于上下文根的路径“/”，即将“/”匹配为“http://host:port/webapp/”，或者至少提供一个选项，例如

<Route path="/" relativeToContextRoot="true" …>

毕竟，将上下文根的实际值而不是作为开发关注点视为规范，而不是异常(exception)。将其提交给React Route团队是合理的要求吗？

最佳答案

React Router允许您为应用程序指定basename。基本名称将从路径名称中删除，并且位置将与路径的其余部分匹配。

例如，如果您将基本名称设置为/mysite，那么对/mysite/page-one的请求将尝试将路径名/page-one与您定义的路由进行匹配。

动态设置basename值仅是将值注入(inject)代码中的一种方式，该方式将允许您的代码在创建history实例使用的<Router>实例时访问该值。

一种可能的解决方案是在呈现HTML时在window上设置一个变量。

<script>
window.__BASENAME__ = '/some/root';
</script>

这样，当您创建history实例时，便可以在应用程序中访问该值。

const BASENAME = window.__BASENAME__ || '/';
const history = useRouterHistory(createHistory)({
  basename: BASENAME
});

关于reactjs - 是否可以不必将上下文根硬编码到用户react-router，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41518059/