Preact-路由器-处理来自子目录的路由

Question

我目前正在创建一个SPA，它可以包含并从任何路径运行。

目前，我创建的任何<Link />组件都会将客户端重定向回它所在域的根目录加上预期的路径。

在react-router中，有一个设置起始基路径的属性；basename。

这在preact-router中似乎不存在，我真的不想切换到react-router，因为它要大得多，而且我不会使用许多其他特性。

一个简单的路线例子：

<Router>
  <Route
    path="/"
    component={Home}
  />
  <Route
    path="/:slug"
    component={Merchant}
  />
</Router>

我在互联网上看到了几个帖子，暗示这是可能的，但是有了这么少的文档，拼凑起来就有点棘手了。

任何帮助都是非常感谢的。

谢谢。

Answer 1

最后，我用自己的组件包装了preact-router Link和Router。在那里，我可以在path属性值前面加上我的应用程序基路由，例如：

<MyRoute
   path="/"
   component={Home}
/>

然后在<MyRoute />的某个地方

const route = 'my/app/base/path';

let result = (route || '') + this.props.path;

result = result.replace(/([^:]\/)\/+/g, '$1');

然后使用结果值<Route path={result} />呈现<Route path={result} />默认组件。

Answer 2

如果您正在寻找哈希路由，则如下所示：https://github.com/developit/preact-router#custom-history。

Answer 3

jhdevuk的回答为我指明了正确的方向。

下面的路由器类将完成这个任务(在TypeScript中)：

    class SubfolderRouter extends preactRouter.Router {

        render(props: preactRouter.RouterProps, state: any) {
            if (state.url.indexOf(MY_FOLDER) == 0) {
                state = {
                    ...state,
                    url: state.url.substr(MY_FOLDER.length),
                };
            }
            return super.render(props, state);
        }
    }

如果您的应用程序生活在文件夹const MY_FOLDER = "/myfolder"，那么这个路由器将忽略该文件夹的网址。如果用户导航到

/myfolder/home/index

然后路由器将查找URL /home/index，因为这是实际的路由。