使用反应路由器的 Preact 应用程序不会在子文件夹中呈现路由

Question

我有一个使用 react 路由器的 Preact 应用程序，并尝试从我的共享主机提供商的子文件夹中运行它。

当我加载网站时，第一条路线或任何后续路线都不会加载。仅加载主页和导航（并在点击时更改 url）。

我尝试在<Router basename="/company"/> 上使用basename="/company"，但这似乎没有什么不同

我还创建了一个 .htaccess 文件，其中包含以下内容：

<IFModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /company
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule . /index.html [L]
</IFModule>

但无法获取要加载的路线。我在控制台中看到他们正在尝试从服务器的根目录加载（domain.com/route-Colors.chunk.123abc.js)，而不是他们所在的文件夹（domain.com/company/route-Colors.chunk.123abc.js)。

为了让 Preact 和 react 路由器从我的共享主机提供商的子文件夹中加载初始视图和所有后续路由，我缺少什么？

Answer 1

我假设这是一个 preact-cli 应用程序，虽然你没有说。

这就是 Webpack 的 publicPath 所做的。您需要在配置文件中对其进行配置。

preact.config.js

export default (config, env, helpers) => {
    if (env.production) {
        config.output.publicPath = 'https://example.com/company';
    }
}

通常公共路径是/，因此它会尝试从根目录加载所有资产。