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

Question

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

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

在react-router中有一个属性设置起始基本路径； basename.

这在 preact-router 中似乎不存在，我真的不想切换到 react-router，因为它明显更大而且我不会使用许多附加功能。

路由的简单示例：

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

我在互联网上看到一些 post 暗示这是可能的，但是由于文档很少，拼凑起来有点棘手。

非常感谢任何帮助。

谢谢。

Answer 1

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

Answer 2

我最终用自己的组件包装了 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, '');

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

Answer 3

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

下面的路由器 class 可以解决问题（这是在 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，因为这是实际路由。

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

Preact-Router - Handle routes from sub directory

router

preact