面试题：Solid.js中如何自定义一个简单的路由钩子

Question

在Solid.js的路由场景下，假设已有基本的路由配置，要求你自定义一个路由钩子，该钩子能够在路由切换时记录当前路由路径到控制台，阐述实现思路并给出核心代码。

Answer 1

实现思路

1. 在Solid.js中，可以利用createEffect结合onCleanup来监听路由变化。createEffect会在组件首次渲染和依赖发生变化时执行。
2. 路由状态通常由路由库提供，我们需要获取这个状态。假设使用的是@solidjs/router，可以通过createLocation获取当前路由位置信息。
3. 每次路由状态变化时，记录当前路由路径到控制台。同时，为了避免多次触发相同路径的记录，可以记录上一次的路径并进行比较。

核心代码

import { createEffect, onCleanup } from 'solid-js';
import { createLocation } from '@solidjs/router';

// 自定义路由钩子
const useRouteLogger = () => {
  const location = createLocation();
  let previousPath = '';

  createEffect(() => {
    const currentPath = location.pathname;
    if (currentPath!== previousPath) {
      console.log('Current route:', currentPath);
      previousPath = currentPath;
    }
  });

  onCleanup(() => {
    // 清理逻辑，这里可以不做任何操作
  });
};

export default useRouteLogger;

在组件中使用这个钩子：

import { render } from'solid-js/web';
import useRouteLogger from './useRouteLogger';

const App = () => {
  useRouteLogger();
  return <div>My Solid.js App</div>;
};

render(() => <App />, document.getElementById('app'));