面试题：Solid.js嵌套路由中如何处理参数传递

Question

在Solid.js的嵌套路由场景下，假设父路由路径为 `/parent/:parentId`，子路由路径为 `/child/:childId`，请描述如何在子组件中获取 `parentId` 和 `childId` 参数，并给出实现代码示例。

Answer 1

在Solid.js的嵌套路由场景下，可通过createRoute钩子函数来获取路由参数。以下是获取parentId和childId参数的描述及代码示例：

获取参数描述

1. 在父组件中定义路由时，将parentId作为参数传递下去。
2. 子组件通过createRoute钩子函数获取当前路由信息，进而提取出parentId和childId。

代码示例

import { render } from "solid-js/web";
import { Router, Route, createRoute } from "solid-router";

// 父组件
const Parent = () => {
  const route = createRoute();
  const { parentId } = route.params;

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Parent ID: {parentId}</p>
      {/* 子路由 */}
      <Route path="/child/:childId" component={Child} />
    </div>
  );
};

// 子组件
const Child = () => {
  const route = createRoute();
  const { parentId } = route.parent.params;
  const { childId } = route.params;

  return (
    <div>
      <h2>Child Component</h2>
      <p>Parent ID: {parentId}</p>
      <p>Child ID: {childId}</p>
    </div>
  );
};

// 应用
render(() => (
  <Router>
    <Route path="/parent/:parentId" component={Parent} />
  </Router>
), document.getElementById("app"));

上述代码中，Parent组件通过createRoute获取parentId，并在子路由中传递。Child组件通过route.parent.params获取父路由的parentId，通过route.params获取自身的childId。