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

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 Linkand 。从那里我可以使用我的应用程序基本路由为属性值添加Router前缀，例如：path

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

然后在某处<MyRoute />：

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

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

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

然后用结果值渲染preact-router默认组件，<Route path={result} />

Answer 2

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

下面的 Router 类可以解决问题（这是在 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"中，则此路由器将忽略 URL 的文件夹。如果用户导航到

/myfolder/home/index

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

Answer 3

如果您正在寻找哈希路由，这里是：https ://github.com/developit/preact-router#custom-history 。