SolidJS Router v0.14.10路由变更重初始化问题求助

问题原因 #

在SolidJS Router v0.14.x版本中，useLocation Hook必须在<Router>组件的上下文内部调用。你原来的代码里，useLocation是在<Router>外层的App组件中调用的，这违反了新版本的上下文依赖规则，导致报错。而v0.9.1版本的Router实现不够严格，允许在上下文外部调用该Hook，所以旧代码可以正常运行。

解决方案 #

有两种可靠的方式实现路由变更时的功能重初始化：

方案1：将监听逻辑移到Router上下文内部

创建一个专门的监听组件，放在<Router>内部，确保useLocation能正确获取上下文：

// 定义路由监听组件
const RouteListener = () => {
  const location = useLocation();
  
  createEffect(() => {
    const currentPath = location.pathname;
    console.log(`Route changed: ${currentPath}`);
    
    window.HSStaticMethods.autoInit();
  });

  return null; // 该组件不需要渲染任何内容
};

// 修改App组件
const App = () => {
  return (
    <Router>
      <RouteListener /> {/* 放在Router内部 */}
      <div class="bg-base-200/60 min-h-screen">
        <Navbar />
        <div class="p-6">
          <Route path="/" component={Home} />
          <Route path="/button" component={Button} />
          <Route path="/card" component={Card} />
          <Route path="/form-elements" component={FormElements} />
          <Route path="/accordion" component={Accordion} />
          <Route path="/advance-forms" component={AdvanceForms} />
          <Route path="/overlays" component={Overlays} />
        </div>
      </div>
    </Router>
  );
};

export default App;

方案2：使用Router的onNavigate回调

利用<Router>组件内置的onNavigate属性，直接监听路由导航事件，这种方式更简洁：

const App = () => {
  // 定义路由变更处理函数
  const handleRouteChange = (to) => {
    console.log(`Route changed: ${to.pathname}`);
    window.HSStaticMethods.autoInit();
  };

  return (
    <Router onNavigate={handleRouteChange}> {/* 绑定导航回调 */}
      <div class="bg-base-200/60 min-h-screen">
        <Navbar />
        <div class="p-6">
          <Route path="/" component={Home} />
          <Route path="/button" component={Button} />
          <Route path="/card" component={Card} />
          <Route path="/form-elements" component={FormElements} />
          <Route path="/accordion" component={Accordion} />
          <Route path="/advance-forms" component={AdvanceForms} />
          <Route path="/overlays" component={Overlays} />
        </div>
      </div>
    </Router>
  );
};

export default App;

说明 #

• 方案1适合需要访问location对象完整属性（如search、hash）的场景；
• 方案2更轻量化，仅需监听导航动作时优先使用。

两种方案都能在SolidJS Router v0.14.x及以上版本正常工作，确保路由变更时触发HSStaticMethods.autoInit()完成功能重初始化。

内容的提问来源于stack exchange，提问作者Yagnik Vamja