面试题：Solid.js路由中如何配置动态路由参数

Question

在Solid.js路由的场景下，描述如何定义和使用动态路由参数，比如在用户详情页路由中，根据不同用户ID展示对应信息，写出关键代码示例。

Answer 1

定义动态路由参数

在 Solid.js 中，使用 createBrowserRouter 来定义路由。对于动态路由参数，在路径中使用冒号（: ）来标识参数。例如，对于用户详情页路由，定义如下：

import { createBrowserRouter } from 'solid-router';

const router = createBrowserRouter([
  {
    path: '/user/:userId',
    Component: UserDetails
  }
]);

这里的 :userId 就是动态路由参数。

使用动态路由参数

在组件内部，可以通过 useParams 钩子来获取动态路由参数。假设 UserDetails 组件如下：

import { useParams } from'solid-router';
import { createSignal } from'solid-js';

const UserDetails = () => {
  const { userId } = useParams();
  const [userInfo, setUserInfo] = createSignal(null);

  // 这里可以根据 userId 去获取用户信息
  // 例如通过 API 调用
  // 在实际应用中，应该使用合适的异步操作，这里简化示例
  setUserInfo({ name: `User ${userId}`, age: 20 });

  return (
    <div>
      <h1>User Details</h1>
      <p>User ID: {userId}</p>
      {userInfo() && (
        <div>
          <p>Name: {userInfo().name}</p>
          <p>Age: {userInfo().age}</p>
        </div>
      )}
    </div>
  );
};

这样，当访问 /user/123 时，UserDetails 组件就能获取到 userId 为 123，并展示对应的用户信息。