preact-router route函数不更新位置与组件及Hash History疑问

一、route函数的使用错误分析 #

你的代码里有两个关键问题导致route函数无法正常更新location和组件：

1. Router的onChange传参错误：你写的是onChange={sanitizeHashPrefix()}，这会在组件渲染时立即执行函数，而非把函数作为路由变化的回调传递。正确写法是传函数本身onChange={sanitizeHashPrefix}（去掉括号）。
2. 执行时机不对：onChange仅在路由变化后触发，但初始加载时的#!前缀不会触发这个回调，所以应该在组件挂载时就执行清理逻辑。

修改后的代码示例：

import { Router, route } from 'preact-router';
import { useEffect } from 'preact/hooks';
import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';
import Library from '../routes/library';
import LibraryCreator from '../routes/libraryCreator';

const sanitizeHashPrefix = () => {
    if (location.hash.startsWith('#!')) {
        const path = location.hash.slice(2);
        if (path) {
            // 强制触发路由跳转并更新location
            route(path, true);
        }
    }
}

const App = () => {
    // 组件挂载时执行一次清理
    useEffect(() => {
        sanitizeHashPrefix();
    }, []);

    return (
        <div id="app">
            <Header />
            <Router>
                <Home path="/" />
                <Profile path="/profile/" user="me" />
                <Profile path="/profile/:user" />
                <Library path="/library/:library" />
                <LibraryCreator path="/library/newLibrary" />
            </Router>
        </div>
    )
}

二、S3托管下的路由选择与Hash History的缺点 #

是否应该用Hash History？ #

是的，必须用。S3是静态文件托管服务，默认只会根据请求路径查找对应文件，无法像服务器端那样把所有路径都指向index.html。你现在用的#!重定向方案，本质就是Hash History的Hashbang模式——Hash部分不会被发送到S3，所有请求都会返回index.html，交由前端路由处理。如果用Browser History，用户直接访问非根路径（比如/profile）时，S3会返回404错误。

当然你也可以结合CloudFront设置自定义错误页面指向index.html，这样就能用Browser History，但配置步骤更繁琐。

Hash History的缺点 #

• URL不友好：带#或#!的URL看起来不够简洁专业，影响用户观感。
• SEO受限：虽然主流搜索引擎能解析Hashbang（#!），但普通Hash路由的内容不会被抓取，可能降低页面的搜索排名。
• 锚点失效：页面内的锚点（比如#section）会被路由的Hash覆盖，无法正常跳转，需要额外处理兼容。
• 兼容性与场景限制：部分旧浏览器或第三方工具对Hash路由支持不佳，分享URL时少数平台可能截断Hash部分。

内容的提问来源于stack exchange，提问作者P.Bjur