在具有事先未知的URL的页面上使用路由器

Question

我有一个庞大的预先存在的网站，其中将添加一些新页面（客户端）ReactJS。新的ReactJS页面所在的路径位于站点的深处：ReactJS页面必须与现有的URL结构很好地配合，这意味着在很多情况下，他们不会知道< / em>他们的基本URL是什么，直到他们重新部署到生产中。 （在某些情况下，他们仍然不知道，因为URL的上半部分，ReactJS页面之前的部分，都是参数化的，并且会随时更改。）

但是，React Router似乎喜欢绝对路径，并且似乎不能很好地处理部分/相对/未知路径。我已经通过在所有内容加载时提前查询document.location.pathname来解决这个问题 - 但它感觉很笨，就像React Router应该能够处理这些开箱即用的相对路径一样。

所以这是我的代码， 工作：

const baseRoute = document.location.pathname;

...

render() {
    return <Router>
        <Route path={baseRoute} component={App}>
            <IndexRoute component={HomePage}/>
            <Route path={baseRoute + "/sub-page1"} component={SubPage1}/>
            <Route path={baseRoute + "/sub-page2"} component={SubPage2}/>
            <Route path={baseRoute + "/*"} component={NotFoundPage}/>
        </Route>
    </Router>;
}

...

render() {
    return <div>
        <IndexLink to={baseRoute}>Home</IndexLink>
        | <Link to={baseRoute + "/sub-page1"}>Sub-Page 1</IndexLink>
        | <Link to={baseRoute + "/sub-page2"}>Sub-Page 2</IndexLink>
    </div>;
}

但这似乎是一种非常笨重，蛮力的方式来处理它。这意味着任何需要路径的东西都需要访问baseRoute变量，该变量在启动时计算一次。这意味着使用路由的所有内容都需要记住使用baseRoute变量。而且，更糟糕的是，代码实际上可以像我上面那样简单，因为传入的URL 可以包含只有React Router知道的子路由，所以在某些例如，需要字符串按摩来正确计算baseRoute。

看起来他们可能通过添加basename属性在React Router 4中更普遍地解决了这个问题，但我们现在正在使用React Router 3.

那么，在React Router 3中，有一个更好的解决方案是将应用程序托管在一个未知的URL上，还是我们仍然坚持传递派生的baseRoute属性？