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

Question

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

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

以下是跟进保罗的回答。

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

但是，我认为这样做只会隐藏而不是改变上下文根必须嵌入到源代码中的事实，这在概念上应该是部署问题。

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

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

毕竟，不将上下文根的实际值视为开发问题与其说是异常(exception)，不如说是一种规范。这是否是提交给 React Route 团队的合理请求？

Answer 1

React Router 允许你指定一个 basename申请。基名将从路径名中删除，并且位置将与路径的其余部分匹配。

例如，如果您将基本名称设置为 /mysite ，然后向 /mysite/page-one 发出请求将尝试匹配路径名 /page-one针对您定义的路线。

动态设置 basename 值只需将值注入(inject)代码中，以允许代码在创建 history 时访问该值。您的<Router> 将使用的实例.

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

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

然后，当您创建 history 时，您将能够在应用程序中访问该值。实例。

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