面试题：Solid.js路由参数传递与处理

Question

在Solid.js路由场景下，如何传递动态参数到目标路由组件中，例如从 `/user/:id` 路径传递 `id` 参数到 `UserDetails` 组件。同时，如何在 `UserDetails` 组件中获取并处理这个参数，并且实现当参数变化时组件的响应式更新，请给出完整的实现思路与代码示例。

Answer 1

1. 实现思路：
   • 在Solid.js的路由配置中，定义带动态参数的路由路径，如/user/:id。
   • 当导航到该路由时，通过路由相关的方法将动态参数传递给目标组件UserDetails。
   • 在UserDetails组件内，使用Solid.js的响应式机制获取并处理该参数，当参数变化时，组件能自动更新。
2. 代码示例：
   • 路由配置： 假设使用@solidjs/router库，示例代码如下：

import { Router, Routes, Route } from '@solidjs/router';
import UserDetails from './UserDetails';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/user/:id" component={UserDetails}></Route>
            </Routes>
        </Router>
    );
}
export default App;

• UserDetails组件：

import { createEffect, createSignal } from 'solid-js';
import { useParams } from '@solidjs/router';

function UserDetails() {
    const { id } = useParams();
    const [userId, setUserId] = createSignal(id);

    createEffect(() => {
        setUserId(id());
        // 在这里可以处理参数变化时的逻辑，例如发起新的API请求
        console.log('用户ID已更新:', userId());
    });

    return (
        <div>
            <p>用户详情页面，用户ID: {userId()}</p>
        </div>
    );
}

export default UserDetails;

在上述代码中，useParams函数从路由中获取动态参数id，createSignal创建了一个响应式的userId，createEffect会在id变化时更新userId并执行相应的副作用逻辑，从而实现组件的响应式更新。