面试题：Solid.js中如何初步实现动态路由并获取URL参数

Question

在Solid.js项目中，简述实现动态路由的基本步骤，并说明怎样从URL中获取参数。假设路由路径为“/user/:id”，请给出获取“id”参数的代码示例。

Answer 1

实现动态路由的基本步骤

1. 安装路由库：在Solid.js项目中，通常使用@solidjs/router库来实现路由功能。通过npm或yarn安装该库：

npm install @solidjs/router

2. 配置路由：在项目的入口文件（例如main.js）或相关路由配置文件中，导入并使用Router和Route组件来定义路由规则。示例如下：

import { render } from 'solid-js/web';
import { Router, Route } from '@solidjs/router';
import UserPage from './UserPage';

render(() => (
  <Router>
    <Route path="/user/:id" component={UserPage} />
  </Router>
), document.getElementById('app'));

3. 创建路由组件：根据定义的路由，创建对应的组件。例如，上述代码中的UserPage组件。

从URL中获取参数

在Solid.js中，通过useRoute钩子函数来获取当前路由信息，从而获取URL中的参数。

获取“id”参数的代码示例

import { createComponent } from 'solid-js';
import { useRoute } from '@solidjs/router';

const UserPage = createComponent(() => {
  const { params } = useRoute();
  const id = params.id;

  return (
    <div>
      <p>用户ID: {id}</p>
    </div>
  );
});

export default UserPage;