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

Question

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

我希望能够使用部署描述符（例如 web.xml）指定的任何上下文根部署我的 Web 应用程序，而无需更改我的任何 React 源代码。

以下是对保罗回答的跟进。

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

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

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

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

毕竟，不将上下文根的实际值视为开发问题更像是一种规范而不是例外。这是向 React Route 团队提交的合理请求吗？

Answer 1

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

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

动态设置基本名称值只需将值注入到您的代码中，这样您的代码就可以在创建history将由您的<Router>.

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

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

然后，您在创建实例时就可以在应用程序中访问该值history。

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