如何在TypeScript的SolidJS中将路由子元素传递给根App组件

我在TypeScript中使用@solidjs/router（版本^0.13.6）实现配置式路由，希望将路由元素传递给根组件App，但遇到了类型错误。原代码如下：

export const routes: RouteDefinition[] = [
  {
    path: '/',
    component: Home,
  },
]

const App: Component = (children: JSX.Element) => {
  return (
    <>
      <Navbar />
      <main>
        {children}
      </main>
      <Footer />
    </>
  );
}


render(
  () => (
    <Router root={App}>
      {routes}
    </Router>
  ),
  root,
);

遇到的错误 #

1. App组件类型错误：

Type '(children: JSX.Element) => JSX.Element' is not assignable to type 'Component'.
  Types of parameters 'children' and 'props' are incompatible.
    Type '{}' is not assignable to type 'Element'.

2. {children}使用错误：

Property 'children' does not exist on type 'JSX.IntrinsicElements'

解决方法 #

1. 修正App组件的Props类型

SolidJS的Component类型要求参数是一个props对象，而非直接传入children。你需要正确定义包含children的props类型：

import type { Component, ComponentPropsWithChildren } from 'solid-js';

// 方式一：显式定义props接口
interface AppProps {
  children: JSX.Element;
}

const App: Component<AppProps> = ({ children }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  );
};

// 方式二：使用ComponentPropsWithChildren简化
const App: ComponentPropsWithChildren<{}> = ({ children }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  );
};

2. 修正Router的配置式路由用法

在@solidjs/router v0.13.x中，配置式路由需要通过Router组件的routes属性传递，而非直接将路由数组作为子元素：

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

export const routes: RouteDefinition[] = [
  {
    path: '/',
    component: Home,
  },
];

// 修正后的render部分
render(
  () => (
    <Router root={App} routes={routes} />
  ),
  root,
);

完整修正后的代码

import { Router, RouteDefinition } from '@solidjs/router';
import { render, ComponentPropsWithChildren } from 'solid-js/web';
import Home from './Home';
import Navbar from './Navbar';
import Footer from './Footer';

export const routes: RouteDefinition[] = [
  {
    path: '/',
    component: Home,
  },
];

const App: ComponentPropsWithChildren<{}> = ({ children }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  );
};

render(
  () => <Router root={App} routes={routes} />,
  document.getElementById('root')!
);

关键说明 #

• SolidJS组件的props始终是一个对象，即使只接收children，也要通过解构从props对象中获取。
• @solidjs/router v0.13.x的配置式路由需通过routes属性传递路由数组，而非子元素形式。

内容的提问来源于stack exchange，提问者Dukhi Atma