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

【问题标题】：Preact-Router - Handle routes from sub directoryPreact-Router - 处理来自子目录的路由
【发布时间】：2018-05-10 14:40:49
【问题描述】：

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

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

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

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

一个简单的路由示例：

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

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

非常感谢任何帮助。

谢谢。

【问题讨论】：

标签： router preact

【解决方案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} />渲染preact-router默认组件

【讨论】：

您能在此处添加更多清晰度吗？你指的 preact-router 默认组件是什么？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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，因为这是实际路由。

【讨论】：